jQuery的 - 點擊複選框添加類和刪除類

Question

我使用的引導，以創建一個複選框，我想創建一個可在所有的複選框，反之亦然（我知道在這個計算器很多導遊）點擊一個複選框，但總之它只能用於輸入。

在這種情況下，我與封閉的標籤「標籤」的輸入，激活複選框引導時會自動添加「活動」類，這個標籤，導致了「檢查」的出現。當我試圖執行將添加的「選中」屬性複選框的輸入這裏找到腳本，他們並沒有因爲這個原因工作，所以我嘗試了以下內容：

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

這是我的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> 

這個工程半途而廢，當我點擊複選框，添加「選中」屬性的所有複選框與「.videoscheck」類，並還增加了‘積極的’類包圍他們的父標籤。

但是因爲我對jQuery不太好，所以我不知道該怎麼做，所以當我再次點擊它時，所有其他複選框將被取消選擇（即與最初操作相反）。

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'); 
}); 

但我更喜歡這種方式：（你已經綁定標籤複選框，這樣你就可以對付change事件複選框）的

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

Answer 2

jQuery有一個toggleClass功能：

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

Answer 3

我認爲將複選框本身的更改事件綁定更好：

$('input#selectall').change(function(){ 
    if (this.checked) { 
    $('input.videoscheck').prop('checked', true).parent().addClass('active'); 
    } else { 
    $('input.videoscheck').prop('checked', false).parent().removeClass('active'); 
    } 
});