Jak obsłużyć zmianę checkboxa za pomocą jQuery?

106

Mam kod

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

Jak obsłużyć zmianę checkboxa za pomocą jQuery? Muszę ustawić program obsługi, aby zmienić zaznaczone pola wyboru.

[aktualizacja]

Jest pole wyboru i kilka przycisków. Każdy przycisk może zmienić pole wyboru. Jak złapać wydarzenie zmieniając pole wyboru?

[Aktualizacja]

Potrzebuję pola wyboru zmiany uchwytu w tym przykładzie jsfiddle . Po kliknięciu tego pola komunikat „OK” nie pojawia się.

RACHUNEK
źródło
Naprawdę nie rozumiem twojego problemu? Co powinno się stać, gdy pole wyboru zostanie zmienione?
Niklas,
Jaki jest problem? Ten kod wydaje się działać dobrze
JaredPar,
2
Czy mógłbyś przeformułować swoje pytanie? Masz już $ ('input [type = "checkbox"]'). Zmień obsługę, co się stało?
Madman,
Jeśli zmienisz pole wyboru przycisku, zdarzenia zmiany nie występują
BILL
3
FYI; $('#chk').prop('checked')zwraca wartość logiczną, a nie wartość atrybutu. Zobacz api.jquery.com/prop
Stefan,

Odpowiedzi:

163

Użyj :checkboxselektora:

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

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

}); 

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

Samich
źródło
75
... i this.checkedjest bardzo przydatny do określenia, czy pole wyboru jest zaznaczone, czy nie.
Stefan
1
Czy można zarejestrować wielu handlerów?
BILL
1
Czy jest to nadal zalecane w 2015 roku?
Eugen Sunic
2
Wygląda na to, że API nie zostało zmienione, więc tak.
Samich
to musi znajdować się wewnątrz $ (document) .ready (function () ... dla mnie, czy to prawda?
kaya
67

Możesz również użyć identyfikatora pola

$('#checkbox1').change(function() {
   if($(this).is(":checked")) {
      //'checked' event code
      return;
   }
   //'unchecked' event code
});
Pinkesh Sharma
źródło
17

Mam nadzieję, że to będzie pomocne.

$('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
źródło
6
od jQuery 1.6 lepiej używać $ (this) .prop ("zaznaczone"), ponieważ będzie się ono dynamicznie zmieniać wraz z aktualnym stanem pola wyboru.
hrabinowitz
3
.attr („zaznaczone”) nie jest poprawne, ponieważ nie jest aktualizowane po kliknięciu przez użytkownika. Potwierdzam komentarz @ hrabinowitz.
Adrien
7
$("input[type=checkbox]").on("change", function() { 

    if (this.checked) {

      //do your stuff

     }
});
Arjun
źródło
1
Przed wysłaniem sprawdź, czy Twój kod działa. Jest rażący problem z twoimi selektorami ...
Jonathan
live () jest przestarzałe.
guettli
4
$('#myForm').on('change', 'input[type=checkbox]', function() {
    this.checked ? this.value = 'apple' : this.value = 'pineapple';
});
Everton ZP
źródło
3
Opisz swoją odpowiedź: rozwiązania zawierające tylko kod są bardziej narażone na usunięcie, ponieważ nie wyjaśniają, po prostu napraw (jeśli w ogóle).
rekaszeru
Przepraszam @rekaszeru Następnym razem zrobię to lepiej
Everton ZP
0

Wydaje mi się, że removeProp nie działa poprawnie w 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
źródło
Jak przełączyć pole wyboru bez wydarzenia (z zewnątrz): jsfiddle.net/k91k0sLu/1
laurent belloeil
0

pobierz wartość radiową według nazwy

  $('input').on('className', function(event){
        console.log($(this).attr('name'));
        if($(this).attr('name') == "worker")
            {
                resetAll();                 
            }
    });
Siva Anand
źródło