JQuery-click-Ereignis binden zu Checkboxen

Hier ist eine einfache Ansicht von, was meine html sieht so aus:

<form>
  <div id="part1">
     //some html form elements including checkboxes
  </div>
  <div id="part2">
    //more html code with more checkboxes
  </div>
  <div id=part2">
     //data table with numerous checkboxes built dynamically
  </div
</form>

Was ich tun müssen, ist, bind die .click() event der Checkboxen in Teil 1, 2 und 3 separat. Ich habe versucht, diese $('#part1:checkbox').click(...) aber das hat nicht funktioniert. Wenn ich $("form :checkbox").click(...) dasselbe click-Ereignis gebunden ist, um alle Checkboxen und nicht nur einen Satz. Wie würde ich trennen Sie diese?

InformationsquelleAutor iJared | 2012-06-27
  1. 19

    Du bist fast da. Sie brauchen nur einen Raum zum trennen der descendant-selector:

    $('#part1 :checkbox').click(function(){
    //code goes here
});

    Zur Steigerung der Leistungsfähigkeit, Sie könnte verwenden möchte, dieses:

    $('#part1 input[type=checkbox]').click(function(){
    //code goes here
});
    • ugh.. der Unterschied ein Leerzeichen macht mahalos
    • wie funktioniert die Verwendung von input[type=checkbox] Verbesserung der performance?
    • ein Gültiger CSS-Selektor. Wenn möglich, die jQuery-pass wird der Selektor zusammen, um querySelectorAll, die weit effizienter als die jQuery-eigene Implementierung von :checkbox.
    • und wie man den text der checkbox ausgewählt ?
    InformationsquelleAutor Joseph Silber
  2. 1

    Oder Sie geben gleichen Klasse Namen für alle Kontrollkästchen und geben Sie die entsprechenden div-ID für die checkbox auch, so können Sie verwenden Sie den folgenden code,

    <input type="checkbox" class="checkall" id="part1">Part 1

    und das Skript geht wie folgt.

    $('.checkall').click(function () {
if (this.checked == false) {
$("." + $(this).attr("id")).hide();
}
});
    InformationsquelleAutor user3512003
  3. 1

    Ich hatte ein ähnliches Problem, und diese StackOverflow-Seite ist die erste Antwort, die ich gestolpert, aber war nicht wirklich zufrieden mit ihm. Ich fand diesen Artikel https://www.kevinleary.net/jquery-checkbox-checked/ mit eine bessere Lösung.

    $('input[name="subscribe"]').on('click', function(){
    if ( $(this).is(':checked') ) {
        $('input[name="email"]').show();
    } 
    else {
        $('input[name="email"]').hide();
    }
});
    InformationsquelleAutor Craig London
  4. 0

    Verwenden:

    $('#part1 input:checkbox').click(...)

    http://api.jquery.com/checkbox-selector/

    InformationsquelleAutor Arash N
Schreibe einen Kommentar