Question

我正在使用bootstrap来创建一个复选框，我想创建一个复选框，点击所有复选框，反之亦然（我知道stackoverflow中有很多关于此的指南），但总之它只适用于输入。

在这种情况下，我在输入中附上标签＆＃34;标签＆＃34;，当激活复选框bootstrap时，会自动添加＆＃34; active＆＃34;这个标签的类导致＆＃34;检查＆＃34;出现。当我尝试实现这里添加了＆＃34; checked＆＃34;归因于复选框的输入，它们不适用于这个原因所以我尝试了以下内容：

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

这是中途工作，当我点击复选框时，添加＆＃34;选中＆＃34;属性为＆＃34; .videoscheck＆＃34;的所有复选框。上课并添加＆＃34; active＆＃34;包含它们的父标记的类。

但由于我对jQuery并不擅长，所以我不知道如何做到这一点，以便当我再次点击它时，将取消选中所有其他复选框（即，与初始操作相反）。 / p>

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

我认为在复选框本身上绑定更改事件会更好：

<script type="text/javascript">
  $(document).ready(function() {
    $('#table1').DataTable();
    $('#table2').DataTable();
  });
</script>
...
<table id="table1" class="display" cellspacing="0" width="100%">
...
<table id="table2" class="display" cellspacing="0" width="100%">

Answer 3

jQuery有一个toggleClass函数：

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

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

3 个答案: