Wie gehe ich mit dem Ändern des Kontrollkästchens mit jQuery um?

106

Ich habe einen Code

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

Wie gehe ich mit dem Ändern des Kontrollkästchens mit jQuery um? Ich muss den Handler setzen, um alle aktivierten Kontrollkästchen zu ändern.

[aktualisieren]

Es gibt ein Kontrollkästchen und einige Schaltflächen. Jede Schaltfläche kann das Kontrollkästchen ändern. Wie fange ich ein Ereignis ab, indem ich das Kontrollkästchen ändere?

[Aktualisieren]

Ich brauche Handle Change Checkbox in diesem Beispiel jsfiddle . Wenn ich auf das Feld klicke, wird die Meldung "OK" nicht angezeigt.

RECHNUNG
quelle
Ich verstehe dein Problem nicht wirklich? Was soll passieren, wenn ein Kontrollkästchen geändert wird?
Niklas
Was ist das Problem? Dieser Code scheint gut zu funktionieren
JaredPar
2
Könnten Sie bitte Ihre Frage umformulieren? Sie haben bereits $ ('input [type = "checkbox"]'). Handler ändern, was ist falsch?
Madman
Wenn Sie das Kontrollkästchen ändern, treten keine Änderungsereignisse auf
BILL
3
Zu Ihrer Information; $('#chk').prop('checked')Gibt eher einen Booleschen Wert als den Wert des Attributs zurück. Siehe api.jquery.com/prop
Stefan

Antworten:

163

Verwenden Sie den :checkboxSelektor:

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

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

}); 

Code: http://jsfiddle.net/s6fe9/

Samich
quelle
75
... und this.checkedist sehr nützlich, um festzustellen, ob das Kontrollkästchen aktiviert ist oder nicht.
Stefan
1
Ist es möglich, mehrere Handler zu registrieren?
Rechnung
1
Wird dies auch 2015 noch empfohlen?
Eugen Sunic
2
Es sieht nicht so aus, als ob die API geändert wurde, also ja.
Samich
Dies muss innerhalb von $ (document) .ready (function () sein ... ist das für mich richtig?
kaya
66

Sie können auch die ID des Feldes verwenden

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

Hoffe, das wäre hilfreich.

$('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
quelle
6
Ab jQuery 1.6 ist es besser, $ (this) .prop ("markiert") zu verwenden, da es sich dynamisch mit dem tatsächlichen Status des Kontrollkästchens ändert.
Hrabinowitz
3
.attr ("markiert") ist nicht korrekt, da es nicht aktualisiert wird, wenn der Benutzer klickt. Ich bestätige den Kommentar von @ hrabinowitz.
Adrien
7
$("input[type=checkbox]").on("change", function() { 

    if (this.checked) {

      //do your stuff

     }
});
Arjun
quelle
1
Bitte überprüfen Sie vor dem Posten, ob Ihr eigener Code funktioniert. Es gibt ein eklatantes Problem mit Ihren Selektoren ...
Jonathan
live () ist veraltet.
Guettli
4
$('#myForm').on('change', 'input[type=checkbox]', function() {
    this.checked ? this.value = 'apple' : this.value = 'pineapple';
});
Everton ZP
quelle
3
Bitte erläutern Sie Ihre Antwort: Nur-Code-Lösungen werden mit größerer Wahrscheinlichkeit gelöscht, da sie nicht erklären, sondern nur korrigieren (falls vorhanden).
Rekaszeru
Sorry @rekaszeru Ich werde es beim nächsten Mal besser machen
Everton ZP
0

Mir scheint, removeProp funktioniert in Chrome nicht richtig: 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
quelle
So schalten Sie ein Kontrollkästchen ohne Ereignis (von außen) um: jsfiddle.net/k91k0sLu/1
Laurent Belloeil
0

Funkwert nach Namen abrufen

  $('input').on('className', function(event){
        console.log($(this).attr('name'));
        if($(this).attr('name') == "worker")
            {
                resetAll();                 
            }
    });
Siva Anand
quelle