使用jquery全选/取消全选

我从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>

这应该行得通

---

我在这里没有看到任何javascript，尽管这是当前的一个特性。问这个问题之前你搜索过吗？如果是这样的话，你遇到了什么困难？看看：@chinmaya panigrahi检查编辑，还有更新的codepenPlease伙计们，停止使用CakePHP标记来回答与php根本没有任何关系的问题！所以，如果我选中所有单个复选框，那么所有复选框都将自动选中？虽然很难notice@Todd..我尝试了你的代码..但它不起作用。全选复选框的id为'StudentHobbyCheckAll'。它将如何对全选复选框的值起作用。我的要求是1。当我选中全选复选框时，将全选。2.选中所有复选框后，如果我取消选中某个复选框，则必须删除selectAll复选框3.如果我选中其余4个复选框，则将自动选中顶部的复选框。这很难做到，因为所有复选框都位于单独的分区中。我的要求是1.当我选中selectAll复选框时，所有复选框都将被选中。2.选中所有复选框后，如果我取消选中某个复选框，则必须删除selectAll复选框3.如果我选中其余4个复选框，则顶部的复选框将自动被选中。这很难做到，因为所有复选框都位于单独的分区中。@dotpushI很高兴我能提供帮助

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

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