1

我有这个 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 在未选中时取消选中具有相同类的本地复选框，反之亦然。这是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');

谁能帮忙？

4

4 回答 4

2

看看jQuery.each()

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

于 2012-07-20T10:20:24.737 回答
1

您可以使用 jquery 函数.is()检查复选框的状态，然后使用.each()函数循环并将具有相同类的所有复选框的状态设置为主复选框之一：

$('#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/

于 2012-07-20T10:19:49.573 回答
0

通过以下方式尝试：

$('#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);
    });
}
});​

工作小提琴

于 2012-07-20T10:40:52.130 回答
0

只需替换您的文档就绪功能：

    $(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');      
                });  
             }
            });
        });        
    });
于 2012-07-20T10:44:50.127 回答