全部/无复选框

使用.prop()而非.attr()

请参阅http://api.jquery.com/prop/

$('input[name="all"]').click(function(){ var status = $(this).is(':checked'); alert(status); $('input[type="checkbox"]').prop('checked', status); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label><input type="checkbox" name="all" checked="true">All / none</label>
<label><input type="checkbox" name="cat1" checked="true">A</label>
<label><input type="checkbox" name="cat2">B</label>
<label><input type="checkbox" name="cat3">C</label>
<label><input type="checkbox" name="cat4">D</label>

如前所述，您应该使用jQuery的.pro（）函数来检查/取消检查复选框元素。

所以试着这样改变你的处理程序：

$('input[name="all"]').click(function(){
    var status = !!$(this).prop('checked');
    alert(status);
    $('input[type="checkbox"]').prop('checked', status);
});

为了隐藏/显示元素，我建议对每个元素进行迭代：

$('input[type="checkbox"]').each(function() {
  var name = $(this).attr('name');
  var status = !!$(this).prop('checked');
  if (status) {
    $('#main').find('.' + name).show();
  } else {
    $('#main').find('.' + name).hide();
  }
});

关于着色的最后一个问题，我建议使用一个类，例如gray。

var total = $('input[type="checkbox"]').not('[name=all]').length;
var count = $('input[type="checkbox"]:checked').not('[name=all]').length;
if (count === total) {
  $('input[name="all"]').removeClass('gray');
} else {
  $('input[name="all"]').addClass('gray');
}

根据需要设置复选框和div可见性。

它使用opacity来模拟灰色复选框。

$('[name="all"]').click(function() {  //set all checkboxes to match All / none
  $(':checkbox')
    .prop('checked', this.checked)
    .change();
});
$('input')
  .change(function() {  //show divs corresponding to checked input
    var checked= $(':checkbox:not([name="all"]):checked').length;
    $('div.' + this.name)
      .toggle(this.checked);
    $('[name="all"]')
      .prop('checked', checked > 0)
      .toggleClass('someChecked', checked && checked<$(':checkbox:not([name="all"])').length);
  })
  .change();  //run the method immediately

$('[name="all"]').click(function() {  //set all checkboxes to match All / none
  $(':checkbox')
    .prop('checked', this.checked)
    .change();
});
$('input')
  .change(function() {  //show divs corresponding to checked input
    var checked= $(':checkbox:not([name="all"]):checked').length;
  
    $('div.' + this.name)
      .toggle(this.checked);
    $('[name="all"]')
      .prop('checked', checked > 0)
      .toggleClass('someChecked', checked && checked<$(':checkbox:not([name="all"])').length);
  })
  .change();  //run the method immediately

.someChecked {
  opacity: 0.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
  <div class="cat1">Element of category1</div>
  <div class="cat4">Element of category4</div>
  <div class="cat3">Element of category3</div>
  <div class="cat1">Element of category1</div>
  <div class="cat2">Element of category2</div>
</div>
<label>
  <input type="checkbox" name="all" checked="true">
  All / none
</label>
<label>
  <input type="checkbox" name="cat1" checked="true">
  A
</label>
<label>
  <input type="checkbox" name="cat2">
  B
</label>
<label>
  <input type="checkbox" name="cat3">
  C
</label>
<label>
  <input type="checkbox" name="cat4">
  D
</label>

// Bind also the single checkboxes to show/hide the elements in div
$('input[type = "checkbox"]').click(function(){
  if($(this).prop('checked'))
    $('div.' + $(this).attr('name')).show();
  else 
    $('div.' + $(this).attr('name')).hide();
});
$('input[name="all"]').click(function(){ 
  var status = $(this).is(':checked'); 
  alert(status);    
   $('input[type="checkbox"]').each(function(){
     $(this).prop('checked', status);
     if(!status)
       $('div.' + $(this).attr('name')).hide();
     else
       $('div.' + $(this).attr('name')).show();
 }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <div class="cat1">Element of category1</div>
  <div class="cat4">Element of category4</div>
  <div class="cat3">Element of category3</div>
  <div class="cat1">Element of category1</div>
  <div class="cat2">Element of category2</div>
</div>
<label><input type="checkbox" name="all" checked="true">All / none</label>
<label><input type="checkbox" name="cat1" checked="true">A</label>
<label><input type="checkbox" name="cat2">B</label>
<label><input type="checkbox" name="cat3">C</label>
<label><input type="checkbox" name="cat4">D</label>

这里的所有答案都很棒。为了将来参考，我发布了我将使用的一个（它混合了@RickHitchcock和复选框的不确定状态的使用）：

$('input[name="all"]').click(function() { $(':checkbox').prop('checked', this.checked).change(); });
$('input[type="checkbox"]').change(function() {  
  var checked = $(':checkbox:not([name="all"]):checked').length;
  $('div.' + this.name).toggle(this.checked);
  $('input[name="all"]').prop('checked', checked > 0)
                    .prop('indeterminate', checked && checked < $(':checkbox:not([name="all"])').length);
}).change();  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
  <div class="cat1">Element of category1</div>
  <div class="cat4">Element of category4</div>
  <div class="cat3">Element of category3</div>
  <div class="cat1">Element of category1</div>
  <div class="cat2">Element of category2</div>
</div>
<label><input type="checkbox" name="all" checked>All / none</label>
<label><input type="checkbox" name="cat1" checked>A</label>
<label><input type="checkbox" name="cat2" checked>B</label>
<label><input type="checkbox" name="cat3" checked>C</label>
<label><input type="checkbox" name="cat4" checked>D</label>