使用jquery全选/取消全选

Question

我有这个来自 cakephp 生成的 ctp 文件的标记。

这基本上是一个有爱好的复选框组。

所以，我想使用 jquery 选中所有/取消选中所有，毕竟如果我取消选中一个框，则选中所有复选框将被删除，因此如果我选中所有单个复选框，选中所有框将自动选中。

我的代码：

<div class="checkgroup">
  <input type="checkbox" name="data[Student][hobby][]" value="checkAll" id="StudentHobbyCheckAll" />
  <label for="StudentHobbyCheckAll">Check All/Uncheck All</label>
</div>
<div class="checkgroup">
  <input type="checkbox" name="data[Student][hobby][]" value="sports" id="StudentHobbySports" />
  <label for="StudentHobbySports">Sports</label>
</div>
<div class="checkgroup">
  <input type="checkbox" name="data[Student][hobby][]" value="movies" id="StudentHobbyMovies" />
  <label for="StudentHobbyMovies">Movies</label>
</div>
<div class="checkgroup">
  <input type="checkbox" name="data[Student][hobby][]" value="netsurfing" id="StudentHobbyNetsurfing" />
  <label for="StudentHobbyNetsurfing">Netsurfing</label>
</div>
<div class="checkgroup">
  <input type="checkbox" name="data[Student][hobby][]" value="photography" id="StudentHobbyPhotography" />
  <label for="StudentHobbyPhotography">Photography</label>
</div>

Answer 1

http://jsfiddle.net/d5b01jdd/

var $chAll = $('#StudentHobbyCheckAll');
var $ch=$('.checkgroup input[type="checkbox"]').not($chAll);

$chAll.click(function () {
    $ch.prop('checked', $(this).prop('checked'));
});

$ch.click(function(){
    if($ch.size()==$('.checkgroup input[type="checkbox"]:checked').not($chAll).size())
        $chAll.prop('checked',true);
    else
        $chAll.prop('checked',false);
});

Answer 2

这应该可行。 CODEPEN

$(function(){
  $('#StudentHobbyCheckAll').on('change', function() {
    $(this)
      .parents(':not(> :checkbox)')
      .find(':checkbox:gt(0)')
      .prop('checked', !$(this)[0].checked);
  }).change();
});