jQuery复选框更改并单击事件

Question

jQuery复选框更改并单击事件$(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"/>

Answer 1

好吧，我没有看到与我匹配的答案，所以我会发布这个。在JSFiddle中测试并执行您要求的操作。当单击与复选框关联的标签时，此方法具有触发的额外好处。

原答案：

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

更新答案：

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

Answer 2

演示

使用 mousedown

$('#checkbox1').mousedown(function() {
    if (!$(this).is(':checked')) {
        this.checked = confirm("Are you sure?");
        $(this).trigger("change");
    }});