Tangkap peristiwa perubahan yang dicentang dari kotak centang

125

Bagaimana cara menangkap check / uncheck event <input type="checkbox" />dengan jQuery?

jquery unchecked Oh Tuhan
sumber
1
Jika Anda menggunakan versi JQuery yang relatif baru, saya akan menggunakan .on ('change', function () {...}) seperti yang disebutkan dalam jawaban @Daniel De Leon di bawah ini. Keuntungannya, event listener "on" akan terikat ke html yang dibuat secara dinamis.
BLang

Jawaban:

172 
<input type="checkbox" id="something" />

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

Edit: Melakukan ini tidak akan menangkap ketika kotak centang berubah karena alasan lain selain klik, seperti menggunakan keyboard. Untuk menghindari masalah ini, dengarkan, changebukan click.

Untuk memeriksa / menghapus centang secara terprogram, lihat Mengapa peristiwa perubahan kotak centang saya tidak dipicu?

marcgg
sumber
document.getElementById ('sesuatu'). diperiksa berfungsi, mengapa $ ('# sesuatu'). diperiksa tidak berfungsi?
omg
Kode Anda kehilangan paran, dan benar-benar harus menggunakan cara jQuery untuk mendapatkan status cek.
Pete Michaud
2
Shore: alasan getElementById berfungsi adalah karena ia mengembalikan elemen DOM, sedangkan fungsi $ jQuery mengembalikan objek jQuery. Objek jQuery memiliki elemen DOM sebagai properti, tetapi itu sendiri bukan objek DOM.
Pete Michaud
3
Saya tahu saya datang terlambat ke pesta, tetapi ini hanya berfungsi ketika peristiwa "klik" memicu hal ini. Jika karena alasan tertentu Anda melakukan sesuatu seperti ini di tempat lain dalam kode: $ ("# something"). Attr ("dicentang", "dicentang") peristiwa klik tidak akan pernah dipicu.
David Stinemetze
3
@DavidStinemetze: Saya akan mengatakan bahwa Anda dapat mendengarkan banyak changedaripada mengklik. Saya memperbarui jawabannya
marcgg
44

Klik akan mempengaruhi label jika kita memiliki label yang dilampirkan ke kotak centang input?

Saya pikir lebih baik menggunakan fungsi .change ()

<input type="checkbox" id="something" />

$("#something").change( function(){
  alert("state changed");
});
Dídac Rios
sumber
1
Ini harus menjadi jawaban yang diterima, karena pertanyaannya adalah tentang mendengarkan acara cek, bukan acara klik.
Jessica
26

Gunakan : pemilih yang dicentang untuk menentukan status kotak centang:

$('input[type=checkbox]').click(function() {
    if($(this).is(':checked')) {
        ...
    } else {
        ...
    }
});
karim79.dll
sumber
13

Untuk penggunaan JQuery 1.7+:

$('input[type=checkbox]').on('change', function() {
  ...
});
Daniel De León
sumber
4

Gunakan potongan kode di bawah ini untuk mencapai ini:

$('#checkAll').click(function(){
  $("#checkboxes input").attr('checked','checked');
});

$('#UncheckAll').click(function(){
  $("#checkboxes input").attr('checked',false);
});

Atau Anda dapat melakukan hal yang sama dengan kotak centang tunggal:

$('#checkAll').click(function(e) {
  if($('#checkAll').attr('checked') == 'checked') {
    $("#checkboxes input").attr('checked','checked');
    $('#checkAll').val('off');
  } else {
    $("#checkboxes input").attr('checked', false);
    $('#checkAll').val('on'); 
  }
});

Untuk demo: http://jsfiddle.net/creativegala/hTtxe/

Arun Kumar
sumber
3

Dalam pengalaman saya, saya harus memanfaatkan target acara saat ini:

$("#dingus").click( function (event) {
   if ($(event.currentTarget).is(':checked')) {
     //checkbox is checked
   }
});
Brandon Aaskov
sumber
3

Kode ini melakukan apa yang Anda butuhkan:

<input type="checkbox" id="check" >check it</input>

$("#check").change( function(){
   if( $(this).is(':checked') ) {
        alert("checked");
    }else{
        alert("unchecked");
   }
});

Juga, Anda dapat memeriksanya di jsfiddle

Deepak saini
sumber
2

gunakan acara klik untuk kompatibilitas terbaik dengan MSIE

$(document).ready(function() {
    $("input[type=checkbox]").click(function() {
        alert("state changed");
    });
});
Ty W
sumber
Bagaimana cara menilai apakah sudah diperiksa atau tidak?
omg
Saya perlu tahu apakah sebuah klik berarti mencentang atau menghapus centang.
omg
1
Anda kemudian dapat menggunakan $ (this) .is (': diperiksa') untuk menguji status item yang baru saja diklik
Ty W
-1 
$(document).ready(function(){
    checkUncheckAll("#select_all","[name='check_boxes[]']");
});

var NUM_BOXES = 10;
// last checkbox the user clicked
var last = -1;
function check(event) {
  // in IE, the event object is a property of the window object
  // in Mozilla, event object is passed to event handlers as a parameter
  event = event || window.event;

  var num = parseInt(/box\[(\d+)\]/.exec(this.name)[1]);
  if (event.shiftKey && last != -1) {
    var di = num > last ? 1 : -1;
    for (var i = last; i != num; i += di)
      document.forms.boxes['box[' + i + ']'].checked = true;
  }
  last = num;
}
function init() {
  for (var i = 0; i < NUM_BOXES; i++)
    document.forms.boxes['box[' + i + ']'].onclick = check;
}

HTML:

<body onload="init()">
  <form name="boxes">
    <input name="box[0]" type="checkbox">
    <input name="box[1]" type="checkbox">
    <input name="box[2]" type="checkbox">
    <input name="box[3]" type="checkbox">
    <input name="box[4]" type="checkbox">
    <input name="box[5]" type="checkbox">
    <input name="box[6]" type="checkbox">
    <input name="box[7]" type="checkbox">
    <input name="box[8]" type="checkbox">
    <input name="box[9]" type="checkbox">
  </form>
</body>
santosh
sumber
15
Hei! Sobat, apa yang kamu lakukan di sini?
omg
Sepertinya pilihan rentang (yaitu, periksa item pertama, tahan shift ke bawah, periksa yang terakhir; dan semua yang di antaranya dicentang.) Namun, ini lebih dari yang diminta pertanyaan. Hilang beberapa kode, seperti checkUncheckAll ().
joelsand