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结构

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

看起来非常直接，但无法让它发挥作用，

我尝试过这样的事情：

 $('div.' + togClass + 'input[type="checkbox"]').attr('checked','checked');

任何人都可以帮忙吗？

Answer 1

查看jQuery.each()

您可以在哪里迭代所有复选框并查看是否已选中

Answer 2

您可以使用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 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');      
                });  
             }
            });
        });        
    });

简单的Jquery CheckAll / UncheckAll复选框

4 个答案: