jQuery-單擊復選框添加類和刪除類

Question

我正在使用引導程序創建一個復選框，並且想要創建一個單擊所有復選框的復選框，反之亦然（我知道在stackoverflow中有很多關於此的指南），但總的來說，它僅適用於輸入。

在這種情況下，我用標簽“ label”將輸入括起來，當激活復選框引導程序時，會自動將“ active”類添加到該標簽中，從而導致“ check”出現。 當我嘗試實現此處找到的將“ checked”屬性添加到復選框輸入的腳本時，由於這個原因它們無法正常工作，因此我嘗試了以下操作：

$('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>

這工作一半，當我單擊復選框時，將“ checked”屬性添加到帶有“ .videoscheck”類的所有復選框，還將“ active”類添加到包圍它們的父標記。

但是由於我對jQuery不滿意，所以我不知道該怎么做，因此當我再次單擊它時，將取消選擇所有其他復選框（即與初始操作相反）。

這是一個小提琴，顯示了我要暴露的東西。

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

我認為最好將更改事件綁定到復選框本身：

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

Answer 3

jQuery具有toggleClass函數：

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