复选框选中所有选项 [英] 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屋！