复选框选中所有选项

我有类别Subcategorywise的复选框设置…

Company Microsoft Apple Country USA UK 

和复选框附加到每个项目。 因此，如果我点击公司旁边的复选框，那么它应该自动标记微软和Apple旁边的复选框，如果我选择国家，它应该检查美国和英国的选项。 并且还应该有一个select all选项，它应该选择所有选项。

是否可以使用javascript或jquery添加复选框检查属性？

 Company Microsoft Apple Country USA UK 

Answer 1

在这里看一下简单的演示： http ： //jsfiddle.net/Pfmuq/2/ 或更简单： http ： //jsfiddle.net/Pfmuq/3/

请注意id应该始终是唯一的，当你阅读我已经注意到你parent的模式和Sub命名的代码时rest，因此我考虑了它。

请注意我也自由切换你的id和类anyhoo代码在下面:)

希望这有帮助， :)

码

 $('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

 Company Microsoft Apple 
 Country USA UK​​​ 

Answer 2

如果您可以稍微修改一下HTML，那么您可以提出一个通用的解决方案，可以根据需要使用多个组（而不仅仅是国家/地区和公司）。

HTML：

 Company Microsoft Apple Country USA UK 

JavaScript的：

 $(function(){ $('.entityCheckboxHeader').click(function() { $('[name="'+this.name+'Sub"]').prop('checked', this.checked); }); });​ 

如果您无法修改HTML，那么Tats_innit的答案是一个很好的，简洁的解决方案。

这里有一个JSFiddle解决方案： http ： //jsfiddle.net/L5qqb/

Answer 3

首先，你应该用包装你的复选框，这样当点击标签时，复选框也会被切换（用户友好）。

然后我建议使用列表对您的复选框进行分组。 （你可以用任何你想要的css来设置它们的样式）。

像这样的东西：

 
 
 Company 
 
Microsoft
 
Apple
 
 
 
 Country 
 
USA
 
UK​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
 
 
 
​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

现在，您可以使用这个非常简单的jquery来完成您的任务：

 $("li :checkbox").change(function(){ $(this).closest("li").find("ul :checkbox").prop("checked", $(this).is(":checked")); });​ 

http://jsfiddle.net/eKTAk/3/

请注意，我已经更改了字段的名称，以便您可以在php脚本（post form）中读取它们：

 $companies = $_POST['companies']; //Gets the array of values for the checked companies $countries = $_POST['countries']; //Gets the array of values for the checked companies