$(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()用来确认取消选中的操作。如果用户选择“取消”,则复选标记会恢复,但.change()会在确认前触发。
.change()
.click()
这会使事情处于不一致状态,并且选中复选框时文本框会显示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')); }); });