So hören Sie zu, wenn in Jquery ein Kontrollkästchen aktiviert ist

74

Ich muss wissen, wann ein Kontrollkästchen auf der Seite aktiviert ist:

z.B

<input type="checkbox">

Ich habe es in Jquery versucht

$('input type=["checkbox"]').change(function(){
alert('changed');
});

Aber es hat nicht funktioniert, irgendwelche Ideen?

Jordash
quelle
Das Problem ist, dass dies $('input type=["checkbox"]')kein gültiger Selektor ist. Es sollte $('input[type=checkbox]')stattdessen sein. Noch besser wäre es aber $('input:checkbox'). ;)
CptRobby

Antworten:

128

Verwenden Sie das change()Ereignis und den is()Test:

$('input:checkbox').change(
    function(){
        if ($(this).is(':checked')) {
            alert('checked');
        }
    });

Ich habe das Obige auf Folgendes aktualisiert, weil ich mich dumm auf jQuery (in the if) verlassen habe, wenn die DOM-Eigenschaften gleichermaßen angemessen und auch billiger zu verwenden wären. Außerdem wurde der Selektor geändert, damit er in den Browsern, die ihn unterstützen, an die DOM- document.querySelectorAll()Methode übergeben werden kann:

$('input[type=checkbox]').change(
    function(){
        if (this.checked) {
            alert('checked');
        }
    });

Der Vollständigkeit halber ist dasselbe auch in einfachem JavaScript leicht möglich:

var checkboxes = document.querySelectorAll('input[type=checkbox]'),
    checkboxArray = Array.from( checkboxes );

function confirmCheck() {
  if (this.checked) {
    alert('checked');
  }
}

checkboxArray.forEach(function(checkbox) {
  checkbox.addEventListener('change', confirmCheck);
});

Verweise:

David sagt, Monica wieder einsetzen
quelle
Können Sie garantieren, dass das Änderungsereignis nur bei einer Änderung des Prüfstatus ausgelöst wird, nicht bei anderen wie Sichtbarkeit usw.?
committedandroider
@committedandroider: " [Kann ich] garantieren ...? " - nein, aber ich werde definitiv sagen, dass ich nie ein Änderungsereignisfeuer für etwas anderes als eine Benutzerinteraktion mit dem Kontrollkästchen oder dem zugehörigen <label>Element hatte (es sei denn, ich löse das Änderungsereignis aus irgendeinem Grund programmatisch aus).
David sagt, Monica
22
$('input:checkbox').live('change', function(){
    if($(this).is(':checked')){
        alert('checked');
    } else {
        alert('un-checked');
    }
});

jsfiddle: http://jsfiddle.net/7Zg3x/1/

Jaspis
quelle
1
Warum .live? Warum nicht .click?
Dotty
9
Da ich nicht weiß, wie / wann das Eingabeelement zum Dom hinzugefügt wird, hilft die Verwendung von .live () als Beispiel, dass sie auch dann relevant sind, wenn eine dynamische Injektion des Elements erfolgt. Im Allgemeinen gilt .live () für Elemente "jetzt und in Zukunft" (wie in den Dokumenten angegeben), und .click () ist eine Verknüpfung für .bind ('click', function () {}) gilt nur für Elemente, die sich bereits im dom befinden.
Jasper
1
@Jasper: liveist viel langsamer als die normale Bindung, da das Ereignis sprudeln sollte. Es ist viel sinnvoller, das changedirekt an das Element gebundene Ereignis zu verwenden, wenn es sich um ein statisches Ereignis handelt.
Shef
7
Ab jQuery 1.7 möchten Sie .on () anstelle von .bind () oder .live () verwenden. Weitere Infos hier: api.jquery.com/on
JD Smith
4
Gemäß den jQuery-Dokumenten wurde ab .live()1.9 vollständig entfernt.
JD Smith
16
$('input:checkbox').change(function(){
    if($(this).is(':checked')){
        alert('Checked');
    }
});

Hier ist eine Demo

Shef
quelle
3

Versuche dies

$('input:checkbox').change(function(){
   if(this.checked)
      alert('checked');
   else
      alert('not checked');
});
ShankarSangoli
quelle
2

Wenn Sie .on verwenden möchten, funktioniert dies

 jQuery('input[type=checkbox]').on('change', function() {
   if (this.checked) {
     console.log('checked');
   }
 });
Daniel
quelle
0
$("input[type='checkbox']").click(function(){
    alert("checked"); 
});

Nur ein normaler reicht aus .click.

dotty
quelle