如何在 jQuery 中保持一致的复选框和文本框值：解决取消问题

jQuery 复选框更改和点击事件：保持与 TextBox 值的一致性

在涉及复选框和对应文本框的场景中，保证一致性至关重要他们的价值观。但是，在复选框上同时使用 .change() 和 .click() 事件时，可能会遇到取消时文本框值与复选框状态不一致的问题。

问题的出现是因为 .change () 根据复选框状态更新文本框值，而 .click() 处理取消选中时的确认。如果用户取消取消选中操作，则在确认之前触发 .change()，从而使文本框值过时。

解决不一致问题

要解决此问题，可以实现以下解决方案：

更新答案：

利用 this.checked 而不是 $(this).is(':checked') 并移动确认逻辑.change() 事件中确保仅在确认成功时正确更新文本框值。

<code class="javascript">$(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);        
    });
});</code>

原始答案：

或者，使用 $( .change() 事件中的 this).attr("checked", returnVal) 和 $(this).is(':checked') 达到相同的结果，确保仅在确认成功时更新文本框值。

<code class="javascript">$(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'));        
    });
});</code>

这些解决方案有效防止取消时文本框值与复选框状态不一致，确保准确表示用户的选择。

以上是如何在 jQuery 中保持一致的复选框和文本框值：解决取消问题的详细内容。更多信息请关注PHP中文网其他相关文章！