简单的jQuery CheckAll/UncheckAll复选框

Question

我有这个jQuery：

$(document).ready(function() { 
    $('#masterChecks input[type="checkbox"]').click(function() { 
    var togClass=$(this).attr('class'); 
    if($(this).attr('checked')){ 

    //need to make sure all checkboxes for this class is checked, when the 
    //master checkbox is checked. 
    $('div.' + togClass).css("display", "inline-block"); 
} 
else 
{ 
     //need to make sure all checkboxes for this class is unchecked, when the 
    //master checkbox is checked. 
    $('div.' + togClass).css("display", "none"); 

} 
}); 

}）;

我有很多div和许多类的Html。有很多复选框。现在我正在检查mastercheckbox，它将隐藏与复选框具有相同类的所有属性的css。我也有一组本地复选框，它们的作用相同，但仅用于它们所在的div。我希望Jquery在未选中的情况下取消选中相同类的本地checbox，反之亦然。下面是HTML struccture

<div id="masterChecks"> 
    // checbox here with class="sampleclass" 
</div> 
<div class="sampleclass"> 
     //local checkbox here 
</div> 

看起来很简单的，但不能让它的工作，

香港专业教育学院尝试了一些这样的事情：

​​

谁能帮助？

Answer 1

可以使用jQuery函数.is()检查复选框的状态，然后使用.each()功能cicle并与同一类设置所有的复选框的状态到主的一个：

$('#masterChecks input[type="checkbox"]').click(function(){ 
var checkclass= $(this).attr('class'); 
if($(this).is(':checked')) 
    $('div.' + checkclass + ' input[type="checkbox"]').each(function(){ 
     $(this).attr('checked', true); 
    }); 
else 
    $('div.' + checkclass + ' input[type="checkbox"]').each(function(){ 
     $(this).attr('checked', false); 
    }); 
}); 

编辑： 增加的工作代码的jsfiddle：http://jsfiddle.net/CFeam/2/

Answer 2

看一看jQuery.each()

在那里你可以遍历所有的复选框，看他们是否被检查

Answer 3

的尝试：

$('#masterChecks input[type="checkbox"]').click(function(){ 
var yourClass = $(this).attr('class'); 
if($(this).is(':checked')) 
{ 
    $('div.' + yourClass + ' input[type="checkbox"]').each(function(){ 
     $(this).attr('checked', true); 
    }); 
} 
else 
{ 
    $('div.' + yourClass + ' input[type="checkbox"]').each(function(){ 
     $(this).attr('checked', false); 
    }); 
} 
});​ 

working fiddle

Answer 4

只需更换您的文档准备功能：

$(document).ready(function() { 
     $('#masterChecks input[type="checkbox"]').click(function() { 
     var togClass=$(this).attr('class'); 
     $(togClass).click(function(){ 
      if($('#masterChecks').is(':checked'){ 
       $('div.' + togClass).css("display", "inline-block"); 
       $(togClass).each(function(){ 
        $(this).attr('checked','checked');  
       }); 
      }else{ 
       $('div.' + togClass).css("display", "none"); 
       $(togClass).each(function(){ 
        $(this).removeAttr('checked');  
       }); 
      } 
      }); 
     });   
    });