如何使用jQuery選擇一組複選框的值動態

Question

我有一個複選框與子複選框的列表。請查看附件圖片！

[] Gender 
    [] Male 
    [] Female 
    [] Baby 

[] Weight 
    [] 50kg 
    [] 100kg 
    [] 75kg  

[] Color 
    [] Brown 
    [] Block 
    [] White 

我需要什麼，如果我們選擇性別（父複選框），然後將子複選框（男，女，寶貝）也將進行檢查，如果我們取消了性別複選框也子複選框也取消選中。

我的複選框代碼如下

{foreach from= $product_param item=key} 
        <div class="parameters"> 
         <span class="title"><input type="checkbox" name="product_param[]" value="{$key->id}" id="product_param_selectall" />&nbsp;&nbsp;{$key->param_name}</span> 
         {foreach from= $key->child_name item=keys} 
         <span><input type="checkbox" name="product_param_child[]" value="{$key->id}" id="product_param" class="child_param-{$key->id}"/> &nbsp;&nbsp;{$keys->param_name}</span> 
         {/foreach} 
        </div> 
       {/foreach} 

注：值是動態值和ID。 [] - 表示這裏複選框

Answer 1

$(".title").on("click",":checkbox",function(){ 
if($(this).is(":checked")) 
{ 
$(this).closest(".parameters").find("input[name='product_param_child']").attr("checked","checked"); 
}else{ 
$(this).closest(".parameters").find("input[name='product_param_child']").removeAttr("checked"); 

} 

}); 

參考:checked

:checkbox

attr

removeAttr

Answer 2

這是一個解決方案。假設HTML：

<div> 
    <input class="parentCheckBox" type="checkbox">Gender</input><br /> 
    <input class="childCheckBox" type="checkbox">Male</input><br /> 
    <input class="childCheckBox" type="checkbox">Female</input><br /> 
</div> 
<div> 
    <input class="parentCheckBox" type="checkbox">Weight</input><br /> 
    <input class="childCheckBox" type="checkbox">50kg</input><br /> 
    <input class="childCheckBox" type="checkbox">100kg</input><br /> 
</div> 

這會工作：

$(function() { 
    $('.parentCheckBox').click(function() { 
     var parentDiv = $(this).parent(); 
     var isChecked = $(this).prop('checked'); 
     $('.childCheckBox', parentDiv).prop('checked', isChecked); 
    }); 
}); 

見this jsfiddle。