jQuery Checkbox aktiviert Status geändert Ereignis

628

Ich möchte, dass ein Ereignis clientseitig ausgelöst wird, wenn ein Kontrollkästchen aktiviert / deaktiviert ist:

$('.checkbox').click(function() {
  if ($(this).is(':checked')) {
    // Do stuff
  }
});

Grundsätzlich möchte ich, dass dies für jedes Kontrollkästchen auf der Seite geschieht. Ist diese Methode zum Auslösen des Klicks und Überprüfen des Status in Ordnung?

Ich denke, es muss einen saubereren jQuery-Weg geben. Kennt jemand eine Lösung?

AnonyMouse
quelle
Gibt es eine Notwendigkeit, diese Frage erneut zu stellen, wenn es in stackoverflow eine sehr häufig gestellte Frage gibt .... stackoverflow.com/questions/901712/…
Ariful Islam
28
@Arif Ich glaube nicht, dass es sich um Duplikate handelt, da es bei der verknüpften Frage darum geht, den Status eines Kontrollkästchens abzurufen, während es sich bei dieser Frage um ein markiertes Ereignis handelt.
Rachel
1
Ich muss immer nach dieser überprüften Eigenschaft suchen, es gibt viele Möglichkeiten, dies zu erreichen, wie hier geschrieben
user3199690

Antworten:

1228

Binden Sie an das changeEreignis statt click. Sie müssen jedoch wahrscheinlich noch prüfen, ob das Kontrollkästchen aktiviert ist oder nicht:

$(".checkbox").change(function() {
    if(this.checked) {
        //Do stuff
    }
});

Der Hauptvorteil der Bindung an das changeEreignis gegenüber dem clickEreignis besteht darin, dass nicht alle Klicks auf ein Kontrollkästchen dazu führen, dass es den Status ändert. Wenn Sie nur Ereignisse erfassen möchten, bei denen das Kontrollkästchen den Status ändert, möchten Sie das changeEreignis mit dem passenden Namen . In Kommentaren redigiert

Beachten Sie auch, dass ich this.checkeddas Element verwendet habe, anstatt es in ein jQuery-Objekt zu verpacken und jQuery-Methoden zu verwenden, einfach weil es kürzer und schneller ist, direkt auf die Eigenschaft des DOM-Elements zuzugreifen.

Bearbeiten (siehe Kommentare)

Um alle Kontrollkästchen zu erhalten, haben Sie mehrere Möglichkeiten. Sie können den :checkboxPseudo-Selektor verwenden:

$(":checkbox")

Oder Sie könnten ein Attribut verwenden, das gleich Selektor ist:

$("input[type='checkbox']")
James Allardice
quelle
1
Eigentlich habe ich es auf der Suche nach dem Kontrollkästchen der Klasse. Gibt es eine bessere Möglichkeit, alle Kontrollkästchen unabhängig von der Klasse zu erhalten?
AnonyMouse
4
@AnonyMouse - Siehe meine Bearbeitung. Es gibt verschiedene Möglichkeiten, dies zu tun.
James Allardice
18
@ Vigrond - Tatsächlich löst das Klicken auf eine Beschriftung das Klickereignis
James Allardice
4
Das ist viel sauberer als $(this).is(':checked'). Ich dachte, Sie changemüssten das Ereignis verwenden, wenn Sie Änderungen über die Tastatur erkennen möchten (Tabulieren, Drücken der Leertaste), aber überraschenderweise clickauch Änderungen, die nicht durch einen Mausklick verursacht wurden, nicht sicher, ob es sich um eine jQuery-Sache handelt, jsfiddle.net / mendesjuan / E39sz
Juan Mendes
41
Bitte beachten Sie : jede Veranstaltung Bindung click, changeoder was auch immer für alle Kontrollkästchen auf der Seite kann zu Leistungsproblemen führt (depepending auf der Menge des Kontrollkästchen). Versuchen Sie, eine Bindung an das übergeordnete Element oder das Dokument $('form').on('change', ':checkbox', function(){ //stuff });
herzustellen
108

Wenn Sie die Kontrollkästchen dynamisch hinzufügen, funktioniert die oben akzeptierte Antwort nicht. Sie müssen die Ereignisdelegierung nutzen, die es einem übergeordneten Knoten ermöglicht, Ereignisse mit Blasen von einem bestimmten Nachkommen zu erfassen und einen Rückruf auszugeben.

// $(<parent>).on('<event>', '<child>', callback);
$(document).on('change', '.checkbox', function() {
    if(this.checked) {
      // checkbox is checked
    }
});

Beachten Sie, dass die Verwendung documentfür den übergeordneten Selektor fast immer nicht erforderlich ist. Wählen Sie stattdessen einen spezifischeren übergeordneten Knoten, um zu verhindern, dass das Ereignis auf zu viele Ebenen übertragen wird.

Das folgende Beispiel zeigt, wie die Ereignisse dynamisch hinzugefügter Dom-Knoten zuvor definierte Listener nicht auslösen.

$postList = $('#post-list');

$postList.find('h1').on('click', onH1Clicked);

function onH1Clicked() {
  alert($(this).text());
}

// simulate added content
var title = 2;

function generateRandomArticle(title) {
  $postList.append('<article class="post"><h1>Title ' + title + '</h1></article>');
}

setTimeout(generateRandomArticle.bind(null, ++title), 1000);
setTimeout(generateRandomArticle.bind(null, ++title), 5000);
setTimeout(generateRandomArticle.bind(null, ++title), 10000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="post-list" class="list post-list">
  <article class="post">
    <h1>Title 1</h1>
  </article>
  <article class="post">
    <h1>Title 2</h1>
  </article>
</section>

In diesem Beispiel wird die Verwendung der Ereignisdelegierung zum Erfassen von Ereignissen für einen bestimmten Knoten ( h1in diesem Fall) und zum Ausgeben eines Rückrufs für solche Ereignisse angezeigt.

$postList = $('#post-list');

$postList.on('click', 'h1', onH1Clicked);

function onH1Clicked() {
  alert($(this).text());
}

// simulate added content
var title = 2;

function generateRandomArticle(title) {
  $postList.append('<article class="post"><h1>Title ' + title + '</h1></article>');
}

setTimeout(generateRandomArticle.bind(null, ++title), 1000); setTimeout(generateRandomArticle.bind(null, ++title), 5000); setTimeout(generateRandomArticle.bind(null, ++title), 10000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="post-list" class="list post-list">
  <article class="post">
    <h1>Title 1</h1>
  </article>
  <article class="post">
    <h1>Title 2</h1>
  </article>
</section>

Apfelbrecher
quelle
23

Nur eine andere Lösung

$('.checkbox_class').on('change', function(){ // on change of state
   if(this.checked) // if changed state is "CHECKED"
    {
        // do the magic here
    }
})
Siddhartha Chowdhury
quelle
4
Während dieser Code die Frage möglicherweise beantwortet, verbessert die Bereitstellung eines zusätzlichen Kontexts darüber, warum und / oder wie dieser Code die Frage beantwortet, ihren langfristigen Wert.
JAL
12

Wenn Sie beabsichtigen, ein Ereignis nur an aktivierte Kontrollkästchen anzuhängen (damit es ausgelöst wird, wenn sie deaktiviert und später erneut aktiviert werden), ist dies das, was Sie möchten.

$(function() {
    $("input[type='checkbox']:checked").change(function() {

    })
})

wenn Sie beabsichtigen, ein Ereignis an alle Kontrollkästchen anzuhängen (aktiviert und deaktiviert)

$(function() {
    $("input[type='checkbox']").change(function() {

    })
})

Wenn Sie möchten, dass es nur ausgelöst wird, wenn sie aktiviert sind (nicht aktiviert), antworten Sie oben auf @James Allardice.

Übrigens input[type='checkbox']:checkedist CSS-Selektor.

Matas Vaitkevicius
quelle
Was ist, wenn Sie nur nicht aktivierte Kontrollkästchen finden möchten? Ich habe dies für alle überprüft $ ("# tableUSNW tbody tr td [id = td1]: Checkbox: markiert"); aber ich weiß nicht, wie ich alle nicht überprüften finden kann.
FrenkyB
1
@FrenkyB versuchen Sie Folgendes:$("input[type='checkbox']:not(:checked)")
Matas Vaitkevicius
5
$(document).ready(function () {
    $(document).on('change', 'input[Id="chkproperty"]', function (e) {
        alert($(this).val());
    });
});
Burhan Kaya
quelle
3

Maßnahmen basierend auf einem Ereignis (bei Klickereignis).

$('#my_checkbox').on('click',function(){
   $('#my_div').hide();
   if(this.checked){
     $('#my_div').show();
   }
});

Ohne dass ein Ereignis basierend auf dem aktuellen Status Maßnahmen ergreift.

$('#my_div').hide();
if($('#my_checkbox').is(':checked')){
  $('#my_div').show();
}
Hasib Kamal
quelle
on 'click' funktioniert in diesem Fall nicht. on 'change' funktioniert.
Mehmood Memon
2

Vielleicht ist dies eine Alternative für Sie.

<input name="chkproperty" onchange="($(this).prop('checked') ? $(this).val(true) : $(this).val(false))" type="checkbox" value="true" />`
Caras
quelle
2

Dies ist die Lösung, um herauszufinden, ob das Kontrollkästchen aktiviert ist oder nicht. Verwenden Sie die Funktion #prop () //

$("#c_checkbox").on('change', function () {
                    if ($(this).prop('checked')) {
                        // do stuff//
                    }
                });
Shan
quelle
1

Versuchen Sie diese jQuery-Validierung

$(document).ready(function() {
  $('#myform').validate({ // initialize the plugin
    rules: {
      agree: {
        required: true
      }

    },
    submitHandler: function(form) {
      alert('valid form submitted');
      return false;
    }
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>

<form id="myform" action="" method="post">
  <div class="buttons">
    <div class="pull-right">
      <input type="checkbox" name="agree" /><br/>
      <label>I have read and agree to the <a href="https://stackexchange.com/legal/terms-of-service">Terms of services</a> </label>
    </div>
  </div>
  <button type="submit">Agree</button>
</form>

Nɪsʜᴀɴᴛʜ ॐ
quelle
1

Ist sehr einfach, so benutze ich:

JQuery:

$(document).on('change', '[name="nameOfCheckboxes[]"]', function() {
    var checkbox = $(this), // Selected or current checkbox
        value = checkbox.val(); // Value of checkbox

    if (checkbox.is(':checked'))
    {
        console.log('checked');
    }else
    {
        console.log('not checked');
    }
});

Grüße!

Radames E. Hernandez
quelle