[英]How to select the set of check box value using jquery Dynamic
I have a list of set check box with sub check box . 我有一个带有子复选框的设置复选框列表。 Please review the attached image! 请查看所附图片!
[] Gender
[] Male
[] Female
[] Baby
[] Weight
[] 50kg
[] 100kg
[] 75kg
[] Color
[] Brown
[] Block
[] White
What i need , If we select Gender (Parent check box )then the sub check boxes(Male, Female,Baby) also will be checked, If we uncheck the gender check box also the sub check box also uncheck. 我需要什么,如果我们选择“性别”(“父母”复选框),则子复选框(“男”,“女”,“宝贝”)也将被选中;如果取消选中“性别”复选框,则子复选框也将不选中。
My code for check box is below 我的复选框代码如下
{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" /> {$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}"/> {$keys->param_name}</span>
{/foreach}
</div>
{/foreach}
Note : The values are dynamic values and id. 注意:这些值是动态值和ID。 [] - represent checkbox here []-在此处代表复选框
$(".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");
}
});
Here's a solution. 这是一个解决方案。 Assuming HTML: 假设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>
This would work: 这将工作:
$(function() {
$('.parentCheckBox').click(function() {
var parentDiv = $(this).parent();
var isChecked = $(this).prop('checked');
$('.childCheckBox', parentDiv).prop('checked', isChecked);
});
});
See this jsfiddle . 看到这个jsfiddle 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.