JQuery kullanarak onay kutusu değişikliği nasıl yapılır?


106

Bazı kodum var

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

JQuery kullanarak onay kutusu değişikliği nasıl yapılır? İşleyiciyi tüm onay kutularını işaretli olarak değiştirmem gerekiyor.

[Güncelleme]

Bir onay kutusu ve birkaç düğme var. Her düğme onay kutusunu değiştirebilir. Onay kutusunu değiştirerek bir olay nasıl yakalanır?

[Güncelleme]

Bu örnekte jsfiddle'da handle change onay kutusuna ihtiyacım var . Kutuya tıkladığımda "Tamam" düğmesi gösterilmiyor.


Problemini gerçekten anlamadım? Bir onay kutusu değiştirildiğinde ne olması gerekiyor?
Niklas

Sorun ne? Bu kod gayet iyi çalışıyor gibi görünüyor
JaredPar

2
Lütfen sorunuzu yeniden ifade eder misiniz? Zaten $ ('input [type = "checkbox"]') var. İşleyiciyi değiştir, sorun ne?
Madman

Düğme onay kutusunu değiştirirseniz değişiklik olayları oluşmaz
BILL

3
Bilginize; $('#chk').prop('checked')özniteliğin değeri yerine bir boole döndürür. Bkz api.jquery.com/prop
Stefan

Yanıtlar:


163

:checkboxSeçiciyi kullan :

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

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

}); 

Kod: http://jsfiddle.net/s6fe9/


75
... ve this.checkedonay kutusunun işaretli olup olmadığını belirlemek için çok kullanışlıdır.
Stefan

1
Birden çok işleyiciyi kaydetmek mümkün mü?
FATURA

1
Bu 2015'te hala tavsiye ediliyor mu?
Eugen Sunic

2
API değiştirilmiş gibi görünmüyor, bu yüzden evet.
Samich

bu $ (document) içinde olmalı. ready (function () ... benim için doğru mu?
kaya

67

Alanın kimliğini de kullanabilirsiniz

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

17

Umarım bu biraz yardımcı olur.

$('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
jQuery 1.6'dan itibaren, onay kutusunun gerçek durumuna göre dinamik olarak değişeceğinden, $ (this) .prop ("işaretli") kullanmak daha iyidir.
hrabinowitz

3
.attr ("işaretlendi") doğru değil, çünkü kullanıcı tıkladığında güncellenmiyor. @ Hrabinowitz'in yorumunu onaylıyorum.
Adrien

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

    if (this.checked) {

      //do your stuff

     }
});

1
Lütfen göndermeden önce kendi kodunuzun çalıştığını kontrol edin. Seçicilerinizle ilgili göze batan bir sorun var ...
Jonathan

live () kullanımdan kaldırıldı.
guettli

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

3
Lütfen cevabınızı detaylandırın: salt kodlu çözümlerin silinme olasılığı daha yüksektir, çünkü açıklamazlar, sadece düzeltin (varsa).
rekaszeru

Üzgünüm @rekaszeru Bir dahaki sefere daha iyisini yapacağım
Everton ZP

0

Bana öyle geliyor ki removeProp Chrome'da düzgün çalışmıyor: 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);
    };

Olay olmadan bir onay kutusu nasıl değiştirilir (dışarıdan): jsfiddle.net/k91k0sLu/1
laurent belloeil

0

isme göre radyo değerini al

  $('input').on('className', function(event){
        console.log($(this).attr('name'));
        if($(this).attr('name') == "worker")
            {
                resetAll();                 
            }
    });
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.