Jquery复选框，隐藏特定的div并选中div内的所有复选框

Question

如何防止在运行代码时不选中复选框？ 我有一些div里面他们复选框，并要检查里面每个checkbexes和隐藏在同一时间的具体格，但是当我运行它，所有的复选框被选中：

HTML：

<input type="checkbox" id="hide-and-checked">group 1 
<div id="one" class="hide-and-checked"> 
    <input type="checkbox" class="list_check" value="1">1 
    <input type="checkbox" class="list_check" value="2">2 
    <input type="checkbox" class="list_check" value="3">3</div> 
<br> 
<input type="checkbox" id="hide-and-checked">grup 2 
<div id="two" class="hide-and-checked"> 
    <input type="checkbox" class="list2" value="1">1 
    <input type="checkbox" class="list2" value="2">2</div> 

JS：

$(document).ready(function() { 
    function toggleDiv() { 
     var $this = $(this); 

     $("." + $this.attr('id'))[$this.is(':checked') ? 'hide' : 'show'](); 

     $(":checkbox").each(

     function() { 
      $(this).attr('checked', true); 
     }); 

    } 
    $('input:checkbox').each(toggleDiv).click(toggleDiv); 
}); 

这是目前：http://jsfiddle.net/oskar9/8k2HK/

Answer 1

以启发的问题首先查看建议event.preventDefault()由于“防止复选框被检查..”。卜后来再读一遍，我明白你想要不同的东西。 “检查并隐藏”前面的步骤。我为这个问题准备了一个demo at jsFiddle。 “上复选框”控制“子复选框”有：

$("input.upper-box").on("change", function() { 
var $this = $(this); 
$this.next("div.sub-group") 
    .find(":checkbox") 
    .prop("checked", $this.prop("checked")) 
.end() 
.toggle("slow"); 
}); 

一个关于jQuery开发团队建议复选框一点需要注意的是，你应该使用prop()而不是attr()如果你的目标（$ 1.6或更高版本） 。

Answer 2

Try thisjsfiddle.net/Subhash09/8k2HK/10/

Answer 3

<input type="checkbox" id="hide-and-checked" checked="true" /> group 1 

<div id="one" class="hide-and-checked" > 
    <input type="checkbox" class="list_check" value="1"/>1 
    <input type="checkbox" class="list_check" value="2"/>2 
    <input type="checkbox" class="list_check" value="3"/>3 
</div> 

<br />   
    <input type="checkbox" id="hide-and-checked"/> grup 2 
<div id="two" class="hide-and-checked"> 

    <input type="checkbox" class="list2" value="1"/>1 
    <input type="checkbox" class="list2" value="2"/>2 

    </div> 

脚本

$(document).ready(function() { 

    $('input[id="hide-and-checked"]').each(function(){ 

    $(this).change(function(){toggleOperation(this)});  
    toggleOperation(this); 
}); 
function toggleOperation(ctrl)  
    { 
     var $this = $(ctrl);   
     if($this.is(':checked')) 
     { 
      $this.next().find(":checkbox").attr("checked",true); 
      $this.next().show(); 


     } 
     else 
     { 

      $this.next().hide();      $this.next().find(":checkbox").attr("checked",false); 
     } 
    } 

}); 

尝试以下链接

http://jsfiddle.net/Bhaarat/8k2HK/13/