复选框选中全部选项
checkbox check all option
我设置了复选框,并按类别子类别...
Company
Microsoft
Apple
Country
USA
UK
并附在每个项目上的复选框。因此,如果我单击"公司"旁边的复选框,那么它应该自动标记"Microsoft"旁边的复选框,并且选中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
在此处查看简单的演示: http://jsfiddle.net/Pfmuq/2/或更简单: http://jsfiddle.net/Pfmuq/3/
请注意id
应该始终是唯一的,休息时您将阅读代码我注意到您的parent
和Sub
命名中的模式,因此我考虑到了这一点。
请注意,我也冒昧地切换了您的 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
<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
如果你能稍微修改一下你的 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/
您应该用<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"));
});
http://jsfiddle.net/eKTAk/3/
请注意,我已经更改了字段的名称,以便您可以在php脚本(post表单)中像这样阅读它们:
$companies = $_POST['companies']; //Gets the array of values for the checked companies
$countries = $_POST['countries']; //Gets the array of values for the checked companies
- 我的单元测试选项是什么
- 如何更改bigquery API中的计费层选项
- 使用Javascript获取所选选项ID
- Selectize.js:如何对整数值的选项进行排序
- 通过js在新选项卡中有条件地打开url
- 按照选项卡索引的顺序循环一个jQuery选择
- 如何在使用selectBoxIt JQuery插件时检测选项更改
- 无法在Ionic select中预先选择最后一个选项
- 如何在选项卡上定义属性'的主窗口对象
- 为什么grunt contrib connect的中间件选项的第三个参数是未定义的
- 使用此选项选择父类内部的类
- CKeditor:更改对话框中的默认选择选项
- 复选框选中全部选项
- 想要禁用我的下一个按钮,直到使用 JavaScript 填充我的全部选项
- 如何使用单个按钮多个发布表单并在新选项卡中全部打开
- 检查是否选中了optgroup中的部分或全部选项
- 如何从显示全部选项中隐藏一个类别?
- 如何使用默认选项“全部”进行过滤
- 选择多重选择-取消选择全部"选项,反之亦然
- 如果选项“全部”,则无法取消多选的所有选项.被选中