Bir onay kutusunun işaretli değişiklik olayını yakala

125

<input type="checkbox" />JQuery ile kontrol / işaretini kaldırma olayını nasıl yakalayabilirim ?

jquery unchecked

— Aman Tanrım
kaynak

1

JQuery'nin nispeten yeni bir sürümünü kullanıyorsanız, aşağıdaki @Daniel De Leon'un yanıtında belirtildiği gibi .on ('change', function () {...}) 'yı kullanırdım. Bir avantaj, "on" olay dinleyicisi dinamik olarak oluşturulan html'ye bağlanacaktır.

— BLang

172

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

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

Düzenleme: Bunu yapmak, klavyeyi kullanmak gibi bir tıklama dışındaki nedenlerle onay kutusu değiştiğinde yakalanmaz. Bu sorunu önlemek için changeyerine dinleyin click.

Programlı olarak işaretlemek / işareti kaldırmak için , Onay kutusu değişiklik etkinliğim neden tetiklenmiyor? Konusuna bakın.

— marcgg
kaynak

document.getElementById ('bir şey'). kontrol çalışıyor, neden $ ('# bir şey'). işaretli çalışmıyor?

— omg

Kodunuzda bir paran eksik ve gerçekten kontrol durumunu elde etmek için jQuery yöntemini kullanmalısınız.

— Pete Michaud

2

Shore: getElementById'nin çalışmasının nedeni, bir DOM öğesi döndürmesidir, oysa $ jQuery işlevi bir jQuery nesnesi döndürür. JQuery nesnesi bir özellik olarak DOM öğesine sahiptir, ancak kendisi bir DOM nesnesi değildir.

— Pete Michaud

3

Partiye geç kaldığımı biliyorum, ancak bu yalnızca bir "tıklama" olayı bunu tetiklediğinde işe yarar. Herhangi bir nedenle kodun başka bir yerinde şöyle bir şey yapacak olsaydınız: $ ("# bir şey"). Attr ("işaretlendi", "işaretlendi"), tıklama olayı asla tetiklenmez.

— David Stinemetze

3

@DavidStinemetze: Tıklamak changeyerine ton dinleyebileceğinizi söyleyebilirim . Cevabı güncelliyorum

— marcgg

44

Giriş onay kutusuna ekli bir etiketimiz varsa, tıklama etiketi etkileyecek mi?

.Change () işlevini kullanmanın daha iyi olacağını düşünüyorum

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

$("#something").change( function(){
  alert("state changed");
});

— Dídac Rios
kaynak

1

Soru bir tıklama olayını değil, bir kontrol olayını dinlemekle ilgili olduğundan, bu kabul edilen yanıt olmalıdır.

— Jessica

26

Onay kutusunun durumunu belirlemek için : işaretli seçiciyi kullanın:

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

— karim79
kaynak

13

JQuery 1.7+ kullanımı için:

$('input[type=checkbox]').on('change', function() {
  ...
});

— Daniel De León
kaynak

4

Bunu başarmak için aşağıdaki kod parçacığını kullanın:

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

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

Veya aynısını tek onay kutusu ile yapabilirsiniz:

$('#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'); 
  }
});

Demo için: http://jsfiddle.net/creativegala/hTtxe/

— Arun Kumar
kaynak

3

Deneyimlerime göre, etkinliğin mevcut Hedefini kullanmak zorunda kaldım:

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

— Brandon Aaskov
kaynak

3

Bu kod ihtiyacınız olanı yapar:

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

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

Ayrıca jsfiddle'da kontrol edebilirsiniz.

— Deepak saini
kaynak

2

MSIE ile en iyi uyumluluk için tıklama olayını kullanın

$(document).ready(function() {
    $("input[type=checkbox]").click(function() {
        alert("state changed");
    });
});

— Ty W
kaynak

Kontrol edilip edilmediğine nasıl karar verilir?

— omg

Bir tıklamanın onu kontrol etmek mi yoksa işaretini kaldırmak mı demek olduğunu bilmem gerekiyor.

— omg

1

daha sonra yeni tıklanan öğenin durumunu test etmek için $ (this) .is (': kontrol edildi') kullanabilirsiniz

— 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
kaynak

15

Dostum, burada ne yapıyorsun?

— omg

Bir aralık seçimine benziyor (yani, ilk öğeyi kontrol edin, kaydırmayı basılı tutun, sonuncuyu kontrol edin; ve aradakilerin tümü kontrol edilir.) Ancak, bu sorunun istediğinden çok daha fazlasıdır. Yine de checkUncheckAll () gibi bazı kodlar eksik.

— joelsand