$(document).ready(function() {
//set initial state.
$('#textbox1').val($(this).is(':checked'));
$('#checkbox1').change(function() {
$('#textbox1').val($(this).is(':checked'));
});
$('#checkbox1').click(function() {
if (!$(this).is(':checked')) {
return confirm("Are you sure?");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox1"/><br />
<input type="text" id="textbox1"/>
这里.change()用复选框状态更新文本框值。我使用.click()来确认取消检查的操作。如果用户选择cancel,则恢复选中标记,但.change()在确认之前触发。
这会使内容处于不一致的状态,当选中复选框时,文本框显示为false。
我如何处理取消和保持文本框值与检查状态一致?
在JSFiddle中测试,并执行您所要求的。这种方法还有一个额外的好处,即当单击与复选框关联的标签时触发。
答:更新
$(document).ready(function() {
//set initial state.
$('#textbox1').val(this.checked);
$('#checkbox1').change(function() {
if(this.checked) {
var returnVal = confirm("Are you sure?");
$(this).prop("checked", returnVal);
}
$('#textbox1').val(this.checked);
});
});
最初的回答:
$(document).ready(function() {
//set initial state.
$('#textbox1').val($(this).is(':checked'));
$('#checkbox1').change(function() {
if($(this).is(":checked")) {
var returnVal = confirm("Are you sure?");
$(this).attr("checked", returnVal);
}
$('#textbox1').val($(this).is(':checked'));
});
});
如果你使用<label for="cbId">cb name</label>,大多数答案都不会捕获它(假设)。这意味着当您单击标签时,它将选中复选框,而不是直接单击复选框。(不完全是这个问题,但各种搜索结果往往会出现在这里)
<div id="OuterDivOrBody">
<input type="checkbox" id="checkbox1" />
<label for="checkbox1">Checkbox label</label>
<br />
<br />
The confirm result:
<input type="text" id="textbox1" />
</div>
在这种情况下,你可以使用:
jQuery的早期版本:
$('#OuterDivOrBody').delegate('#checkbox1', 'change', function () {
// From the other examples
if (!this.checked) {
var sure = confirm("Are you sure?");
this.checked = !sure;
$('#textbox1').val(sure.toString());
}
});
jQuery 1.6.4的JSFiddle例子
jQuery 1 + 7。
$('#checkbox1').on('change', function() {
// From the other examples
if (!this.checked) {
var sure = confirm("Are you sure?");
this.checked = !sure;
$('#textbox1').val(sure.toString());
}
});
JSFiddle的例子与最新的jQuery 2.x
添加了jsfiddle示例和带有可点击复选框标签的html