javascript - jQuery-单击复选框添加类和删除类

我正在使用引导程序来创建一个复选框，并且想要创建一个单击所有复选框的复选框，反之亦然（我知道在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不太满意，所以我不知道该怎么做，因此当我再次单击它时，所有其他复选框都将被取消选中（即与初始操作相反）。

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

最佳答案

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

关于javascript - jQuery-单击复选框添加类和删除类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44621405/