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。

如何使用jquery Dynamic选择复选框值集

2 个答案: