复选框选中所有选项 [英] checkbox check all option
问题描述
我设置了类别Subcategorywise的复选框...
I have checkbox set with Category Subcategorywise...
Company
Microsoft
Apple
Country
USA
UK
并附上复选框每个物品。因此,如果我点击公司旁边的复选框,那么它应该自动标记微软和Apple旁边的复选框,如果我选择国家,它应该检查美国和英国的选项。并且还应该有一个select all选项,它应该选择所有选项。
and checkbox attached to each item. So if I click on checkbox next to Company, then it should automatically mark checkboxes next to Microsoft and Apple checked, like wise if I select Country, it should check the options USA and UK. and there should also be a select all option, which should select all of them.
是否可以使用javascript或jquery添加复选框检查属性?
Is it possible to add checkbox check property using javascript or 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
推荐答案
在此处查看简单演示: http://jsfiddle.net/Pfmuq/2/ 或更简单: http://jsfiddle.net/Pfmuq/3/
请注意 id
应该始终是唯一的,当您阅读我注意到<$ c $中的模式的代码时休息c>父和 Sub
命名,因此我将其记入帐户。
Please note id
should always be unique at all times, rest when you will read the code I have noticed a pattern in your parent
and Sub
naming hence I took that under account.
请注意我也冒昧地切换你的id和类anyhoo代码低于:)
please note I also took liberty to switch over your id and class anyhoo code is below :)
希望这有帮助, :)
代码
$('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
这篇关于复选框选中所有选项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!