javascript - 如何使用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");

}

});

参考：检查

:复选框

属性

删除属性

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。