Bagaimana cara menangani perubahan kotak centang menggunakan jQuery?


106

Saya punya beberapa kode

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

Bagaimana cara menangani perubahan kotak centang menggunakan jQuery? Saya perlu meletakkan pawang untuk mengubah kotak centang yang dicentang.

[memperbarui]

Ada kotak centang dan beberapa tombol. Setiap tombol dapat mengubah kotak centang. Bagaimana cara menangkap acara mengubah kotak centang?

[Memperbarui]

Saya perlu menangani kotak centang perubahan dalam contoh ini jsfiddle . Ketika saya mengklik kotak pesan tombol "OK" tidak ditampilkan.


Saya tidak begitu mengerti masalah Anda? Apa yang seharusnya terjadi jika kotak centang diubah?
Niklas

Apa masalahnya? Kode ini tampaknya berfungsi dengan baik
JaredPar

2
Bisakah Anda mengubah pertanyaan Anda? Anda sudah memiliki $ ('input [type = "checkbox"]'). Ubah handler, ada apa?
Madman

Jika Anda mengubah acara perubahan kotak centang tombol tidak terjadi
BILL

3
FYI; $('#chk').prop('checked')mengembalikan boolean daripada nilai atribut. Lihat api.jquery.com/prop
Stefan

Jawaban:


163

Gunakan :checkboxpemilih:

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

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

}); 

Kode: http://jsfiddle.net/s6fe9/


75
... dan this.checkedsangat berguna untuk menentukan apakah kotak centang dicentang atau tidak.
Stefan

1
Apakah mungkin untuk mendaftarkan banyak penangan?
BILL

1
Apakah ini masih direkomendasikan di tahun 2015?
Eugen Sunic

2
Sepertinya API tidak diubah, jadi ya.
Samich

ini harus di dalam $ (document) .ready (function () ... bagi saya, apakah itu benar?
kaya

67

Anda juga dapat menggunakan Id bidang

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

17

Semoga ini bisa membantu.

$('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
pada jQuery 1.6, lebih baik menggunakan $ (this) .prop ("dicentang"), karena ini akan berubah secara dinamis dengan status kotak centang yang sebenarnya.
hrabinowitz

3
.attr ("dicentang") tidak benar, karena tidak diperbarui saat pengguna mengklik. Saya mengkonfirmasi komentar @ hrabinowitz.
Adrien

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

    if (this.checked) {

      //do your stuff

     }
});

1
Silakan periksa kode Anda sendiri berfungsi sebelum memposting. Ada masalah mencolok dengan penyeleksi Anda ...
Jonathan

live () tidak digunakan lagi.
guettli

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

3
Harap jelaskan jawaban Anda: solusi khusus kode lebih mungkin dihapus, karena tidak dijelaskan, cukup perbaiki (jika ada).
rekaszeru

Maaf @rekaszeru Saya akan melakukannya dengan lebih baik lain kali
Everton ZP

0

Sepertinya saya removeProp tidak berfungsi dengan baik di 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);
    };

Cara mengaktifkan kotak centang tanpa acara (dari luar): jsfiddle.net/k91k0sLu/1
laurent belloeil

0

dapatkan nilai radio dengan nama

  $('input').on('className', function(event){
        console.log($(this).attr('name'));
        if($(this).attr('name') == "worker")
            {
                resetAll();                 
            }
    });
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.