Câu hỏi jQuery, các hộp kiểm và .is (“: checked”)


Khi tôi liên kết một hàm với phần tử hộp kiểm như:

$("#myCheckbox").click( function() {
    alert($(this).is(":checked"));
});

Hộp kiểm thay đổi thuộc tính đã kiểm tra của nó trước sự kiện được kích hoạt, đây là hành vi bình thường và đưa ra kết quả ngược lại.

Tuy nhiên, khi tôi làm:

$("#myCheckbox").click();

Hộp kiểm thay đổi thuộc tính đã kiểm tra sau sự kiện được kích hoạt.

Câu hỏi của tôi là, có cách nào để kích hoạt sự kiện nhấp chuột từ jQuery như một cú nhấp bình thường sẽ làm (kịch bản đầu tiên)?

PS: Tôi đã thử với trigger('click');


76
2018-04-17 22:33


gốc


Tôi vừa xác minh điều này. Bạn hoàn toàn chính xác. Điều đó không hình như giống như nó có thể là một lỗi. Tôi sẽ nêu nó như một lỗi với jQuery và xem điều gì sẽ xảy ra dev.jquery.com - cletus
Còn về sự kiện 'thay đổi' thì sao? - ZippyV
@cletus Thật vậy, nó là một lỗi Jquery 1.4.2. 1.3.2 hoạt động tốt. - Ben
Tôi thấy cùng một hành vi trong cả 1.4.2 và 1.3.2: jsfiddle.net/HCUNn - Nick Craver♦
@Nick Nó vẫn làm ngược lại với những gì một cú click chuột bình thường sẽ làm. Tôi thành thật không biết tại sao 1.3.2 làm việc cho tôi và 1.4.2 không, nhưng vẫn còn, mà cần phải được thay đổi. - Ben


Các câu trả lời:


$('#myCheckbox').change(function () {
    if ($(this).prop("checked")) {
        // checked
        return;
    }
    // not checked
});

Lưu ý: Trong các phiên bản cũ hơn của jquery, bạn có thể sử dụng attr. Bây giờ nó được đề nghị sử dụng prop để đọc tiểu bang.


71
2018-04-17 22:56



Tôi đã thử rằng, "$ (# myCheckbox) .click ()" bỏ chọn / kiểm tra hộp nhưng chức năng thay đổi không bao giờ được kích hoạt. Tôi cũng đã thử thay đổi thuộc tính 'checked' thay vì gọi click () và thậm chí thiết lập chức năng 'change' thành 'live'. - Ben
@Ben - Bạn phải kích hoạt nó theo một cách khác để có được điều này để chạy, xem câu trả lời của tôi cho câu lệnh kích hoạt. - Nick Craver♦
@ Cảm ơn bạn, tôi sẽ chấp nhận câu trả lời tcurdt như ông là người đầu tiên đi ra với giải pháp. Silly tôi tôi đã không kích hoạt phương pháp 'thay đổi'. - Ben
và đối với các phiên bản mới hơn của jquery, chức năng là lệnh prop ("checked") thay vì attr ("checked") trong trường hợp bắt bất kỳ ai khác. - danski
Tôi sẽ tránh 'chống đỡ' do không tương thích ngược, đặc biệt. trong IE. - vapcguy


Có một công việc xung quanh hoạt động trong jQuery 1.3.2 và 1.4.2:

$("#myCheckbox").change( function() {
    alert($(this).is(":checked"));
});

//Trigger by:
$("#myCheckbox").trigger('click').trigger('change');​​​​​​​​​​​​​

Nhưng tôi đồng ý, hành vi này có vẻ như bị lỗi so với sự kiện bản địa.


24
2018-04-17 23:06





Tính đến tháng 6 năm 2016 (sử dụng jquery 2.1.4) không có giải pháp nào khác được đề xuất làm việc. Kiểm tra attr('checked') luôn luôn trả về undefined và is('checked) luôn luôn trả về false.

Chỉ cần sử dụng phương pháp chống:

$("#checkbox").change(function(e) {

  if ($(this).prop('checked')){
    console.log('checked');
  }
});

9
2018-06-13 09:05



is('checked) sẽ trả về false vì "checked" không phải là bộ chọn giả CSS. Cái đúng nên là is(':checked') do đó, tìm kiếm ": checked" để thay thế. - dhaupin


Tôi vẫn đang gặp phải hành vi này với jQuery 1.7.2. Cách giải quyết đơn giản là trì hoãn việc thực thi trình xử lý nhấp chuột với setTimeout và để cho trình duyệt thực hiện phép thuật của nó trong thời gian chờ đợi:

$("#myCheckbox").click( function() {
    var that = this;
    setTimeout(function(){
        alert($(that).is(":checked"));
    });
});

3
2017-09-05 10:31



Rực rỡ, cảm ơn rất nhiều! - Vlad Spreys
Vâng! Một chút offtopic, nhưng tôi đã phải làm tương tự trong Kendo lưới với hộp kiểm khi ai đó nhấp vào "Thêm hồ sơ mới" nếu tôi muốn nó được "hoạt động" theo mặc định. Tôi cũng phải cho nó một thời gian 500ms. Sau đó tôi phải thêm .click(), sau đó đặt .attr('value', 'true'), sau đó .change(), sau đó .blur() trước khi nó lập trình sẽ đặt hộp khi tôi nhấp vào nút "Cập nhật" lập trình .... - vapcguy


Nếu bạn dự đoán hành vi thay vì không mong muốn này, thì một hành vi xung quanh nó sẽ là truyền một tham số bổ sung từ jQuery.trigger () tới trình xử lý nhấn của hộp kiểm. Tham số bổ sung này là để thông báo cho trình xử lý nhấp chuột rằng nhấp chuột đã được kích hoạt theo chương trình, thay vì người dùng trực tiếp nhấp vào hộp kiểm đó. Trình xử lý nhấp chuột của hộp kiểm sau đó có thể đảo ngược trạng thái kiểm tra được báo cáo.

Vì vậy, đây là cách tôi kích hoạt sự kiện nhấp chuột trên hộp kiểm có ID "myCheckBox". Lưu ý rằng tôi cũng chuyển một tham số đối tượng với một thành viên duy nhất, nonUI, được đặt thành true:

$("#myCheckbox").trigger('click', {nonUI : true})

Và đây là cách tôi xử lý điều đó trong trình xử lý sự kiện nhấp chuột của hộp kiểm. Hàm xử lý kiểm tra sự hiện diện của đối tượng nonUI làm tham số thứ hai của nó. (Tham số đầu tiên luôn luôn là sự kiện chính nó.) Nếu tham số có mặt và được đặt thành true thì tôi đảo ngược trạng thái được kiểm tra đã báo cáo. Nếu không có thông số như vậy được thông qua - sẽ không có nếu người dùng chỉ cần nhấp vào hộp kiểm trong giao diện người dùng - sau đó tôi báo cáo trạng thái đã kiểm tra thực tế:

$("#myCheckbox").click(function(e, parameters) {
   var nonUI = false;
        try {
            nonUI = parameters.nonUI;
        } catch (e) {}
        var checked = nonUI ? !this.checked : this.checked;
        alert('Checked = ' + checked);
    });

Phiên bản JSFiddle tại http://jsfiddle.net/BrownieBoy/h5mDZ/

Tôi đã thử nghiệm với Chrome, Firefox và IE 8.


2
2018-06-21 05:41





<input id="widget-wpb_widget-3-custom_date" class="mycheck" type="checkbox" value="d/M/y" name="widget-wpb_widget[3][custom_date]" unchecked="true">    

var atrib = $('.mycheck').attr("unchecked",true);
$('.mycheck').click(function(){
if ($(this).is(":checked")) 
{
$('.mycheck').attr("unchecked",false);
   alert("checkbox checked");
}
else
{
$('.mycheck').attr("unchecked",true);
 alert("checkbox unchecked");
}
});

2
2017-08-21 12:50



Một số bình luận sẽ tốt đẹp - Danil Gaponov


  $("#checkbox").change(function(e) {

  if ($(this).prop('checked')){
    console.log('checked');
  }
});

2
2018-02-28 10:52





Vâng, để phù hợp với kịch bản đầu tiên, đây là một cái gì đó tôi đã đưa ra.

http://jsbin.com/uwupa/edit

Về cơ bản, thay vì ràng buộc sự kiện "click", bạn ràng buộc sự kiện "change" với cảnh báo.

Sau đó, khi bạn kích hoạt sự kiện, trước tiên bạn kích hoạt nhấp chuột, sau đó kích hoạt thay đổi.


0
2018-04-17 23:04





Ngoài câu trả lời của Nick Craver, để làm việc này đúng cách IE 8 bạn cần thêm trình xử lý nhấp chuột bổ sung vào hộp kiểm:

// needed for IE 8 compatibility
if ($.browser.msie)
    $("#myCheckbox").click(function() { $(this).trigger('change'); });

$("#myCheckbox").change( function() {
    alert($(this).is(":checked"));
});

//Trigger by:
$("#myCheckbox").trigger('click').trigger('change');

Nếu không, cuộc gọi lại sẽ chỉ được kích hoạt khi hộp kiểm mất tiêu điểm, như IE 8 tập trung vào các hộp kiểm và radio khi chúng được nhấp.

Chưa thử nghiệm IE 9 Tuy nhiên.


0
2018-06-04 16:30





$( "#checkbox" ).change(function() {
    if($(this).is(":checked")){
        alert('hi');
    }

});

0
2017-07-01 09:28



Vui lòng đề cập đến một số chi tiết - CodeWarrior
Có vẻ như đây chỉ là câu trả lời lặp đi lặp lại, sử dụng change thay vì OP clickvà chỉ sử dụng if tuyên bố như một cách kiểm tra khác nhau cho :checked. - vapcguy


Cách nhanh nhất và dễ dàng nhất:

$('#myCheckbox').change(function(){
    alert(this.checked);
});

$el[0].checked;

$ el - là phần tử jquery của phép chọn.

Thưởng thức!


-1
2018-05-20 11:02