javascript - jQuery复选框更改和单击事件(jQuery checkbox change and click event)

Question

 $(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"/> 

Here .change() updates the textbox value with the checkbox status.

(在此.change()使用复选框状态更新文本框值。)

I use .click() to confirm the action on uncheck.

(我使用.click()来确认取消选中的操作。)

If the user selects cancel, the checkmark is restored but .change() fires before confirmation.

(如果用户选择“取消”，则复选标记会恢复，但是.change()在确认之前会触发。)

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

(这会使状态处于不一致状态，并且选中复选框时文本框会显示false。)

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

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

  ask by Professor Chaos translate from so

Answer 1

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.

(在JSFiddle中进行了测试， 可以满足您的要求。这种方法的附加好处是，当单击与复选框关联的标签时，可以触发。)

Updated Answer:

(更新的答案：)

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

Original Answer:

(原始答案：)

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