Làm cách nào để xử lý việc thay đổi hộp kiểm bằng jQuery?


106

Tôi có một số mã

<input type="checkbox" id="chk" value="value" />
<label for="chk">Value </label>
<br/>
<input type="button" id="But1" value="set value" />
<br />
<input type="button" id="But2" value="read checked" />

javascript:

$(document).ready(function () {
    console.log("Ready ...");
    registerHandlers();

    function registerHandlers() {
        $('#But1').click(function () {
            $('#chk').prop('checked', !$('#chk').is(':checked'));
        });
        $('#But2').click(function () {
            var chk1 = $('#chk').is(':checked');
            console.log("Value : " + chk1);
        });

        $('input[type="checkbox"]').change(function () {
            var name = $(this).val();
            var check = $(this).prop('checked');
            console.log("Change: " + name + " to " + check);
        });
    }
});

Làm cách nào để xử lý việc thay đổi hộp kiểm bằng jQuery? Tôi cần đặt trình xử lý để thay đổi bất kỳ hộp kiểm nào được chọn.

[cập nhật]

Có một hộp kiểm và một vài nút. Mỗi nút có thể thay đổi hộp kiểm. Làm thế nào để bắt một sự kiện thay đổi hộp kiểm?

[Cập nhật]

Tôi cần hộp kiểm xử lý thay đổi trong jsfiddle ví dụ này . Khi tôi nhấp vào hộp, nút "OK" không hiển thị.


Tôi không thực sự hiểu vấn đề của bạn? Điều gì sẽ xảy ra khi một hộp kiểm được thay đổi?
Niklas

Vấn đề là gì? Mã này dường như hoạt động tốt
JaredPar

2
Bạn có thể vui lòng diễn đạt lại câu hỏi của bạn không? Bạn đã có $ ('input [type = "checkbox"]'). Thay đổi trình xử lý, có chuyện gì vậy?
Madman

Nếu bạn thay đổi nút hộp kiểm, sự kiện thay đổi không xảy ra
BILL

3
FYI; $('#chk').prop('checked')trả về một boolean thay vì trả về giá trị của thuộc tính. Xem api.jquery.com/prop
Stefan

Câu trả lời:


163

Sử dụng :checkboxbộ chọn:

$(':checkbox').change(function() {

        // do stuff here. It will fire on any checkbox change

}); 

Mã: http://jsfiddle.net/s6fe9/


75
... và this.checkedrất hữu ích để xác định làm ướt hộp kiểm có được chọn hay không.
Stefan

1
Có thể đăng ký nhiều trình xử lý không?
BILL

1
Điều này có còn được khuyến nghị trong năm 2015 không?
Eugen Sunic

2
Có vẻ như API đã được thay đổi, vì vậy có.
Samich

nhu cầu này là bên trong của $ (document) .ready (function () ... đối với tôi, đó là đúng?
kaya

67

Bạn cũng có thể sử dụng Id của trường

$('#checkbox1').change(function() {
   if($(this).is(":checked")) {
      //'checked' event code
      return;
   }
   //'unchecked' event code
});

17

Hy vọng, điều này sẽ được một số giúp đỡ.

$('input[type=checkbox]').change(function () {
    if ($(this).prop("checked")) {
        //do the stuff that you would do when 'checked'

        return;
    }
    //Here do the stuff you want to do when 'unchecked'
});

6
kể từ jQuery 1.6, tốt hơn nên sử dụng $ (this) .prop ("đã kiểm tra"), vì nó sẽ tự động thay đổi theo trạng thái thực của hộp kiểm.
hrabinowitz

3
.attr ("đã kiểm tra") không chính xác vì nó không được cập nhật khi người dùng nhấp vào. Tôi xác nhận nhận xét của @ hrabinowitz.
Adrien

7
$("input[type=checkbox]").on("change", function() { 

    if (this.checked) {

      //do your stuff

     }
});

1
Vui lòng kiểm tra mã của bạn hoạt động trước khi đăng. Có một vấn đề trừng mắt với bộ chọn của bạn ...
Jonathan

live () không được dùng nữa.
guettli

4
$('#myForm').on('change', 'input[type=checkbox]', function() {
    this.checked ? this.value = 'apple' : this.value = 'pineapple';
});

3
Vui lòng giải thích câu trả lời của bạn: các giải pháp chỉ có mã có nhiều khả năng bị xóa hơn, vì chúng không giải thích, chỉ sửa (nếu có).
rekaszeru

Xin lỗi @rekaszeru, lần sau tôi sẽ làm tốt hơn
Everton ZP

0

Có vẻ như đối với tôi removeProp không hoạt động bình thường trong Chrome: jsfiddle

        $('#badBut1').click(function () {
        checkit('Before');
        if( $('#chk').prop('checked') )
        {
          $('#chk').removeProp('checked');
        }else{
            $('#chk').prop('checked', true);
        }
        checkit('After');
    });
    $('#But1').click(function () {
        checkit('Before');
        if( $('#chk').prop('checked') )
        {
          $('#chk').removeClass('checked').prop('checked',false);
        }else{
            $('#chk').addClass('checked').prop('checked', true);
        }
        checkit('After');
    });

    $('#But2').click(function () {
        var chk1 = $('#chk').is(':checked');
        console.log("Value : " + chk1);
    });

    $('#chk').on( 'change',function () {
        checkit('Result');
    });
    function checkit(moment) {
        var chk1 = $('#chk').is(':checked');
        console.log(moment+", value = " + chk1);
    };

Làm thế nào để chuyển đổi một hộp kiểm mà không cần sự kiện (từ bên ngoài): jsfiddle.net/k91k0sLu/1
laurent belloeil

0

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

  $('input').on('className', function(event){
        console.log($(this).attr('name'));
        if($(this).attr('name') == "worker")
            {
                resetAll();                 
            }
    });
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.