我的复选框设置为Category Subcategorywise ...
Company
Microsoft
Apple
Country
USA
UK
和每个项目附带的复选框。因此,如果我点击公司旁边的复选框,那么它应该自动标记微软和Apple旁边的复选框,如果我选择国家,它应该检查美国和英国的选项。并且还应该有一个全选选项,应该选择所有选项。
是否可以使用javascript或jquery添加复选框检查属性?
<input type="checkbox" class="entityCheckboxHeader1" id="entityCheckboxHeader" name="Company">Company
<input id="modalEntity" class="entity1" type="checkbox" name="CompanySub">Microsoft
<input id="modalEntity" class="entity2" type="checkbox" name="CompanySub">Apple
<input type="checkbox" class="entityCheckboxHeader2" id="entityCheckboxHeader" name="Country">Country
<input id="modalEntity" class="entity3" type="checkbox" name="CountrySub">USA
<input id="modalEntity" class="entity4" type="checkbox" name="CountrySub">UK
答案 0 :(得分:4)
在此处查看简单演示: http://jsfiddle.net/Pfmuq/2/ 或更简单:http://jsfiddle.net/Pfmuq/3/
请注意id
始终应该是唯一的,当您阅读我已注意到parent
和Sub
命名模式的代码时,请停下来,因此我将其视为帐号
请注意我也可以自由切换你的id和类任何代码都在:)
以下
希望这有帮助,:)
<强>码强>
$('input[name="Company"],input[name="Country"]').click(function(){
if ($(this).is(':checked')){
$(this).nextAll('input[name="'+this.name+'Sub"]').prop('checked',true);
} else {
$(this).nextAll('input[name="'+this.name+'Sub"]').prop('checked',false);
}
});
来自第二个演示的代码
$('input[name="Company"],input[name="Country"]').click(function(){
$(this).nextAll('input[name="'+this.name+'Sub"]').prop('checked',this.checked);
});
<强> HTML 强>
<input type="checkbox" class="entityCheckboxHeader1" id="entityCheckboxHeader" name="Company">Company
<input class="modalEntityCompany" id="entity1" type="checkbox" name="CompanySub">Microsoft
<input class="modalEntity" id="entity2" type="checkbox" name="CompanySub">Apple
<br />
<input type="checkbox" class="entityCheckboxHeader2" id="entityCheckboxHeader" name="Country">Country
<input class="modalEntity" id="entity3" type="checkbox" name="CountrySub">USA
<input class="modalEntity" id="entity4" type="checkbox" name="CountrySub">UK
答案 1 :(得分:0)
如果您可以稍微修改一下HTML,那么您可以提出一个通用的解决方案,可以根据需要使用多个组(而不仅仅是国家和公司)。
<强> HTML:强>
<input type="checkbox" class="entityCheckboxHeader" name="Company">Company
<input type="checkbox" name="CompanySub">Microsoft
<input type="checkbox" name="CompanySub">Apple
<input type="checkbox" class="entityCheckboxHeader" name="Country">Country
<input type="checkbox" name="CountrySub">USA
<input type="checkbox" name="CountrySub">UK
<强> JavaScript的:强>
$(function(){
$('.entityCheckboxHeader').click(function() {
$('[name="'+this.name+'Sub"]').prop('checked', this.checked);
});
});
如果您无法修改HTML,那么Tats_innit的答案就是一个很好的,简洁的解决方案。
这里有一个解决方案的JSFiddle:http://jsfiddle.net/L5qqb/
答案 2 :(得分:0)
首先,你应该用<label>
包装你的复选框,这样当点击标签时,复选框也会被切换(用户友好)。
然后我建议使用列表对您的复选框进行分组。 (你可以用任何你想要的css来设置它们的样式。)
这样的事情:
<ul>
<li class="entityCheckboxHeader1" >
<label><input type="checkbox" id="entityCheckboxHeader1">Company</label>
<ul>
<li><label><input id="modalEntity11" class="entity1" type="checkbox" name="company[]">Microsoft</label></li>
<li><label><input id="modalEntity12" class="entity2" type="checkbox" name="company[]">Apple</label></li>
</ul>
</li>
<li class="entityCheckboxHeader2">
<label><input type="checkbox" id="entityCheckboxHeader2">Country</label>
<ul>
<li><label><input id="modalEntity21" class="entity3" type="checkbox" name="country[]">USA</label></li>
<li><label><input id="modalEntity22" class="entity4" type="checkbox" name="country[]">UK</label></li>
</ul>
</li>
</ul>
现在你可以使用这个非常简单的jquery来完成你的任务:
$("li :checkbox").change(function(){
$(this).closest("li").find("ul :checkbox").prop("checked", $(this).is(":checked"));
});
请注意,我已经更改了字段的名称,以便您可以在php脚本(帖子表单)中这样读取它们:
$companies = $_POST['companies']; //Gets the array of values for the checked companies
$countries = $_POST['countries']; //Gets the array of values for the checked companies