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ę.


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/


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

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

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

     }
});

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

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

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();                 
            }
    });
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.