jQuery - Klicken Sie auf das Kontrollkästchen Klasse hinzufügen und entfernen Sie die Klasse

Question

Ich verwende Bootstrap, um ein Kontrollkästchen zu erstellen, und ich möchte ein Kontrollkästchen, das auf alle Kontrollkästchen klickt und umgekehrt (ich weiß, es gibt viele Anleitungen in Stackoverflow darüber) Insgesamt funktioniert es nur an den Eingängen.

In diesem Fall schließe ich die Eingabe mit einem Label "label", beim Aktivieren des Kontrollkästchens bootstrap fügt automatisch die "aktive" Klasse zu diesem Tag hinzu, die das "check" erscheinen lässt. Als ich versuchte, Skripte zu implementieren hier gefunden, dass die „überprüft“ -Attribut auf den Eingang der Checkbox hinzugefügt, haben sie aus diesem Grund nicht funktionieren, so habe ich versucht, die folgenden:

$('label#seleccionartodos').click(function(){ 
    $('input.videoscheck').prop('checked', true).parent().addClass('active'); 
}); 

Und das ist mein html:

<div class="form-group" data-toggle="buttons"> 
<label for="selectall">SELECT/UNSELECT ALL:</label> 
<label class="btn btn-success" id="seleccionartodos"> 
    <input type="checkbox" id="selectall" autocomplete="off"> 
    <span class="glyphicon glyphicon-ok"></span> 
</label> 
</div> 
<div class="form-group" data-toggle="buttons"> 
    <label class="btn btn-success"> 
    <input type="checkbox" class="videoscheck" autocomplete="off"> 
    <span class="glyphicon glyphicon-ok"></span> 
    </label> 
</div> 
<div class="form-group" data-toggle="buttons"> 
    <label class="btn btn-success"> 
    <input type="checkbox" class="videoscheck" autocomplete="off"> 
    <span class="glyphicon glyphicon-ok"></span> 
    </label> 
</div> 
<div class="form-group" data-toggle="buttons"> 
    <label class="btn btn-success"> 
    <input type="checkbox" class="videoscheck" autocomplete="off"> 
    <span class="glyphicon glyphicon-ok"></span> 
    </label> 
</div> 

Dies funktioniert auf halber Strecke, wenn ich das Kontrollkästchen klicken, fügen sie das „geprüft“ Attribut für alle Kontrollkästchen mit der „.videoscheck“ Klasse und fügt auch die ‚aktive‘ Klasse in die übergeordnete Tag, die sie umgibt.

Da ich aber mit jQuery nicht gut bin, weiß ich nicht, wie ich es machen soll. Wenn ich es erneut anklicke, werden alle anderen Kontrollkästchen deaktiviert (also das Gegenteil der ursprünglichen Aktion).

Here's a Fiddle showing what I'm exposing.

Answer 1

$('label#seleccionartodos').click(function(){ 
    $('input.videoscheck').prop('checked', $(this).children('input').is(':checked')) 
     .parent().toggleClass('active'); 
}); 

Aber ich ziehe auf diese Weise: (Sie bereits Etikett gebunden Checkbox, so dass Sie mit change Fall Checkbox umgehen können)

$('#selectall').on('change', function() { 
    $('input.videoscheck').prop('checked', $(this).is(':checked')).parent().toggleClass('active'); 
}); 

Answer 2

jQuery hat eine toggleClass Funktion :

$('div').click(function() { 
    $(this).toggleClass('active'); 
} 

Answer 3

Ich denke, es ist besser, ein Änderungsereignis auf der Checkbox selbst zu binden: