Thay đổi hộp kiểm jQuery và nhấp vào sự kiện

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

Ở đây .change()cập nhật giá trị hộp văn bản với trạng thái hộp kiểm. Tôi sử dụng .click()để xác nhận hành động trên bỏ chọn. Nếu người dùng chọn hủy, dấu kiểm được khôi phục nhưng .change()kích hoạt trước khi xác nhận.

Điều này khiến mọi thứ ở trạng thái không nhất quán và hộp văn bản nói sai khi hộp kiểm được chọn.

Làm cách nào tôi có thể xử lý việc hủy và giữ giá trị hộp văn bản phù hợp với trạng thái kiểm tra?

Đã thử nghiệm trong JSFiddle và thực hiện những gì bạn yêu cầu. Cách tiếp cận này có thêm lợi ích của việc bắn khi nhãn được liên kết với hộp kiểm được nhấp vào.

Cập nhật câu trả lời:

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

Câu trả lời gốc:

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

Bản giới thiệu

Sử dụng mousedown

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

Hầu hết các câu trả lời sẽ không bắt được (có lẽ) nếu bạn sử dụng <label for="cbId">cb name</label>. Điều này có nghĩa là khi bạn nhấp vào nhãn, nó sẽ đánh dấu vào ô thay vì nhấp trực tiếp vào hộp kiểm. (Không chính xác câu hỏi, nhưng các kết quả tìm kiếm khác nhau có xu hướng đến đây)

<div id="OuterDivOrBody">
    <input type="checkbox" id="checkbox1" />
    <label for="checkbox1">Checkbox label</label>
    <br />
    <br />
    The confirm result:
    <input type="text" id="textbox1" />
</div>

Trong trường hợp bạn có thể sử dụng:

Earlier versions of jQuery:

$('#OuterDivOrBody').delegate('#checkbox1', 'change', function () {
    // From the other examples
    if (!this.checked) {
        var sure = confirm("Are you sure?");
        this.checked = !sure;
        $('#textbox1').val(sure.toString());
    }
});

Ví dụ về JSFiddle với jQuery 1.6.4

jQuery 1.7+

$('#checkbox1').on('change', function() { 
    // From the other examples
    if (!this.checked) {
        var sure = confirm("Are you sure?");
        this.checked = !sure;
        $('#textbox1').val(sure.toString());
    }
});

Ví dụ về JSFiddle với jQuery 2.x mới nhất

• Đã thêm ví dụ jsfiddle và html với nhãn hộp kiểm có thể nhấp

Chà .. chỉ để cứu cơn đau đầu (đã quá nửa đêm ở đây), tôi có thể nghĩ ra:

$('#checkbox1').click(function() {
  if (!$(this).is(':checked')) {
    var ans = confirm("Are you sure?");
     $('#textbox1').val(ans);
  }
});

Hy vọng nó giúp

Đối với tôi điều này hoạt động rất tốt:

$('#checkboxID').click(function () {
    if ($(this).attr('checked')) {
        alert('is checked');
    } else {
        alert('is not checked');
    }
})

Của bạn đây

Html

<input id="ProductId_a183060c-1030-4037-ae57-0015be92da0e" type="checkbox" value="true">

JavaScript

<script>
    $(document).ready(function () {

      $('input[id^="ProductId_"]').click(function () {

        if ($(this).prop('checked')) {
           // do what you need here     
           alert("Checked");
        }
        else {
           // do what you need here         
           alert("Unchecked");
        }
      });

  });
</script>

Loại bỏ sự kiện thay đổi và thay vào đó thay đổi giá trị của hộp văn bản trong sự kiện nhấp chuột. Thay vì trả về kết quả xác nhận, hãy bắt nó trong một var. Nếu nó đúng, thay đổi giá trị. Sau đó trả lại var.

Hộp kiểm bấm và kiểm tra giá trị trong cùng một vòng lặp sự kiện là vấn đề.

Thử cái này:

$('#checkbox1').click(function() {
    var self = this;
    setTimeout(function() {

        if (!self.checked) {
            var ans = confirm("Are you sure?");
            self.checked = ans;
            $('#textbox1').val(ans.toString());
        }
    }, 0);
});

Bản trình diễn: http://jsfiddle.net/mrchief/JsUWv/6/

nếu bạn đang sử dụng iCheck Jquery, hãy sử dụng đoạn mã dưới đây

 $("#CheckBoxId").on('ifChanged', function () {
                alert($(this).val());
            });

Thử cái này

$('#checkbox1').click(function() {
        if (!this.checked) {
            var sure = confirm("Are you sure?");
            this.checked = sure;
            $('#textbox1').val(sure.toString());
        }
    });

$(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')) {
            if(!confirm("Are you sure?"))
            {
                $("#checkbox1").prop("checked", true);
                $('#textbox1').val($(this).is(':checked'));
            }
        }
    });
});

// this works on all browsers.

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val($(this).is(':checked'));

    $('#checkbox1').change(function(e) {
        this.checked =  $(this).is(":checked") && !!confirm("Are you sure?");
        $('#textbox1').val(this.checked);
        return true;
    });
});

$('#checkbox1').click(function() {
    if($(this).is(":checked")) {
        var returnVal = confirm("Are you sure?");
        $(this).attr("checked", returnVal);
    }
    $('#textbox1').val($(this).is(':checked')); 
});


<div id="check">
    <input type="checkbox" id="checkbox1" />
    <input type="text" id="textbox1" />
</div>

Trả lời muộn, nhưng bạn cũng có thể sử dụng on("change")

$('#check').on('change', function() {
     var checked = this.checked
    $('span').html(checked.toString())
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="check" > <span>Check me!</span>

chỉ cần sử dụng nhấp vào sự kiện id hộp kiểm của tôi là CheckAll

     $('#CheckAll').click(function () {

        if ($('#CheckAll').is(':checked') == true) {

             alert(";)");
      }
    }

nhận giá trị radio theo tên

 $('input').on('className', function(event){
        console.log($(this).attr('name'));
        if($(this).attr('name') == "worker")
            {
                resetAll();                 
            }
    });

Tôi không chắc tại sao mọi người lại làm điều này quá phức tạp. Đây là tất cả những gì tôi đã làm.

if(!$(this).is(":checked")){ console.log("on"); }

 $("#person_IsCurrentAddressSame").change(function ()
    {
        debugger
        if ($("#person_IsCurrentAddressSame").checked) {
            debugger

        }
        else {

        }

    })