如何使用jQuery Dynamic選擇復選框值集

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");

}

});

參考：已檢查

：復選框

屬性

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);
    });
});

看到這個jsfiddle 。