jQuery复选框更改和单击事件

2022-01-15 00:00:00 checkbox event-handling jquery javascript 

$(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() 在确认之前触发.

Here .change() updates the textbox value with the checkbox status. I use .click() to confirm the action on uncheck. If the user selects cancel, the checkmark is restored but .change() fires before confirmation.

这会使事情处于不一致的状态，并且在选中复选框时文本框会显示为 false.

This leaves things in an inconsistent state and the textbox says false when the checkbox is checked.

如何处理取消并保持文本框值与检查状态一致?

How can I deal with the cancellation and keep textbox value consistent with the check state?

推荐答案

在 JSFiddle 中测试并且确实如此您要什么.这种方法具有在单击与复选框关联的标签时触发的额外好处.

Tested in JSFiddle and does what you're asking for.This approach has the added benefit of firing when a label associated with a checkbox is clicked.

更新答案:

$(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'));        
    });
});

相关文章