jQuery-Kontrollkästchen aktivieren/deaktivieren [duplicate]

Lesezeit: 4 Minuten

Benutzer-Avatar
Benutzer1587985

Was wäre ein geeigneter Weg, um das Kontrollkästchen zu aktivieren/deaktivieren, das sich in dem Element befindet, das meine Funktion auslöst?

Hier ist mein Code:

<table id="news_list">
<tr>
    <td><input type="checkbox" name="news[1]" /></td>
    <td>TEXT</td>
</tr></table>

$("#news_list tr").click(function() {
    var ele = $(this).find('input');
    if(ele.is(':checked')){
        ele.removeAttr('checked');
        $(this).removeClass('admin_checked');
    }else{
        ele.attr('checked', 'checked');
        $(this).addClass('admin_checked');
    }
});

Das Problem ist, dass ich jedes Kästchen nur einmal aktivieren und deaktivieren kann. Nachdem ich manchmal aktiviert und deaktiviert habe, werden immer noch Klassen hinzugefügt / entfernt, aber nie wieder ein Kontrollkästchen aktiviert (selbst wenn ich auf das Kontrollkästchen klicke, nicht auf die Tabellenzeile).

Ich habe versucht, den Trigger .bind(‘click’) zu verwenden, aber es ist das gleiche Ergebnis.

Irgendwelche Lösungen?

  • Wenn ich mir die Antworten ansehe, bin ich mir nicht sicher, ob sie eine Lösung für das bieten, was Sie versuchen. Ich sehe nicht ein, warum es sinnvoll wäre, das Kontrollkästchen grundsätzlich zu deaktivieren, was diese gegebenen Antworten tun (Denn wenn Sie auf das Kontrollkästchen klicken, wird es aktiviert und das bedeutet, dass die if-Anweisung es sofort deaktiviert … und das bedeutet Sie kann das Kontrollkästchen niemals durch Anklicken des eigentlichen Kontrollkästchens aktivieren … richtig? ). Ist es das, was Sie tun möchten?: jsfiddle.net/7gbhf

    – Jonas

    8. Februar 2013 um 10:24 Uhr


  • @Joonas Danke, das ist genau das, was ich brauchte! Jais Antwort funktionierte für einzelne Reihen, nicht für mehrere

    – Benutzer1587985

    8. Februar 2013 um 10:49 Uhr


  • Gut. Eines jedoch. Wenn mein jsfiddle genau das ist, was Sie brauchen, bin ich mir nicht sicher, ob ich sehe, wie Jais Antwort für eine Zeile funktioniert. Sie können das Kontrollkästchen nicht aktivieren, indem Sie auf das Kontrollkästchen klicken, was auf die if-Anweisung zurückzuführen ist, wie ich oben erklärt habe. Ich denke also, dass du diesen Teil verpasst hast, oder … ich weiß immer noch nicht, was du wolltest 🙂

    – Jonas

    8. Februar 2013 um 10:55 Uhr


Benutzer-Avatar
Jai

Verwenden .prop() stattdessen und wenn wir mit Ihrem Code gehen, dann vergleichen Sie wie folgt:

Schau dir das Beispiel an jsbin:

  $("#news_list tr").click(function () {
    var ele = $(this).find(':checkbox');
    if ($(':checked').length) {
      ele.prop('checked', false);
      $(this).removeClass('admin_checked');
    } else {
      ele.prop('checked', true);
      $(this).addClass('admin_checked');
    }
 });

Änderungen:

  1. Geändert input zu :checkbox.
  2. Vergleichen the length des checked checkboxes.

  • prop hat bei mir nicht funktioniert, aber removeAttr und attr tat, mit jQuery 1.9.1.

    – Maschinensüchtig

    17. April 2014 um 14:58 Uhr


  • Danke, Prop hat ein anderes Problem für mich gelöst, also fand ich diese Information sehr nützlich.

    – Nick Lewis

    22. Dezember 2014 um 11:04 Uhr

  • @NickLewis gerne geschehen.

    – Jai

    22. Dezember 2014 um 11:52 Uhr

  • Wenn dies nicht funktioniert, stellen Sie sicher, dass die IDs nicht zwischen den Elementen dupliziert werden

    – ppostma1

    5. Mai 2016 um 17:20 Uhr

  • Danke für die Änderungen @PeterMortensen

    – Jai

    23. Mai 2017 um 11:08 Uhr

Benutzer-Avatar
Adil

Verwenden Sie prop() anstelle von attr(), um den Wert von festzulegen checked. Auch verwenden :checkbox in find-Methode statt input und konkret sein.

Live-Demo

$("#news_list tr").click(function() {
    var ele = $(this).find('input');
    if(ele.is(':checked')){
        ele.prop('checked', false);
        $(this).removeClass('admin_checked');
    }else{
        ele.prop('checked', true);
        $(this).addClass('admin_checked');
    }
});

Verwenden Sie für Eigenschaften wie „checked“ prop anstelle von attr

Ab jQuery 1.6 gibt die Methode .attr() für nicht gesetzte Attribute undefined zurück. Verwenden Sie die .prop()-Methode, um DOM-Eigenschaften wie den aktivierten, ausgewählten oder deaktivierten Status von Formularelementen abzurufen und zu ändern

  • api.jquery.com/checkbox-selector Da :checkbox eine jQuery-Erweiterung und nicht Teil der CSS-Spezifikation ist, können Abfragen, die :checkbox verwenden, nicht von der Leistungssteigerung profitieren, die von der nativen DOM-Methode querySelectorAll() bereitgestellt wird. Verwenden Sie für eine bessere Leistung in modernen Browsern [type=”checkbox”] stattdessen.

    – Andriy F.

    16. Juli 2013 um 10:21 Uhr


  • Eigentlich ist das die richtige Lösung. Akzeptierte Antworten haben ein Problem. Vielen Dank für diese Lösung.

    – Manik

    10. April 2017 um 12:01 Uhr


Benutzer-Avatar
Mahmoh

 $('mainCheckBox').click(function(){
    if($(this).prop('checked')){
        $('Id or Class of checkbox').prop('checked', true);
    }else{
        $('Id or Class of checkbox').prop('checked', false);
    }
});

1245930cookie-checkjQuery-Kontrollkästchen aktivieren/deaktivieren [duplicate]

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy