Checkbox checked Klasse hinzufügen

Möchte ich hinzufügen, dass eine Klasse, mein label, mein Kontrollkästchen, wenn es aktiviert.

Heres meine html -

<ul class="checkbox-list">
    <li><label class="rounded-all">Google <input class="checkbox-row" name="google" type="checkbox" value=""></label></li>
    <li><label class="rounded-all">Bing <input class="checkbox-row" name="bing" type="checkbox" value=""></label></li>
    <li><label class="rounded-all">Facebook <input class="checkbox-row" name="facebook" type="checkbox" value=""></label> </li> 
</ul>

Habe ich versucht mit diesem Stück code ich habe hier aber doesn ' T scheinen zu den trick tun:

$(".checkbox-row").change(function() {
    $(this).closest('.checkbox-list li label').toggleClass("selected", this.checked);
});
InformationsquelleAutor Carpy | 2010-11-27
  1. 3

    Was Sie haben funktioniert, Sie können es hier testen. Was wahrscheinlich geschieht, ist dein CSS-Selektor für Ihre .selected Klasse ist nicht spezifisch genug, und so die Eigenschaften sind einfach nicht immer angewendet.

    Zum Beispiel, das kann nicht funktionieren (wenn Sie sagen, es war ein .checkbox-list li label Stil definiert mit einer anderen Farbe):

    .selected { color: red; }

    Während einer spezifischeren Selektor würde:

    .checkbox-list li label.selected { color: red; }

    Es ist nichts Wert, wenn, Ihre .am nächsten() Aufruf vereinfacht werden kann ein bit mit nur label:

    $(".checkbox-row").change(function() {
  $(this).closest('label').toggleClass("selected", this.checked);
});
    • Danke, funktioniert gut. Wie Sie sagen, ich hatte nur zur Vereinfachung der CSS-Klasse.
    InformationsquelleAutor Nick Craver
  2. 2

    Versuchen Sie dies:

    $(".checkbox-row").change(function() {
    if($(this).is(':checked')) 
        $(this).parent().addClass('selected'); 
    else 
        $(this).parent().removeClass('selected');
});
    • Dies wird fügen Sie die Klasse, um die <li>, nicht die <label>.
    • Nein ist es nicht - Direkt übergeordnete Element der Eingabe ist die Bezeichnung.
    InformationsquelleAutor Shane IvoKid Reid
Schreibe einen Kommentar