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.

TAGIHAN
sumber
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/

Samich
sumber
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
});
Pinkesh Sharma
sumber
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'
});
Lokesh Yadav
sumber
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

     }
});
Arjun
sumber
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';
});
Everton ZP
sumber
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);
    };
laurent belloeil
sumber
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();                 
            }
    });
Siva Anand
sumber