2

我的复选框设置为 Category Subcategorywise ...

Company
    Microsoft
    Apple

 Country
     USA
     UK

和附加到每个项目的复选框。因此，如果我单击 Company 旁边的复选框，那么它应该自动标记 Microsoft 和 Apple 旁边的复选框已选中，同样如果我选择 Country，它应该检查选项 USA 和 UK。并且还应该有一个全选选项，应该选择所有选项。

是否可以使用 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
4

3 回答 3

5

在此处查看简单演示：http: //jsfiddle.net/Pfmuq/2/ 或更简单：http: //jsfiddle.net/Pfmuq/3/

请注意id，在任何时候都应该是唯一的，当你阅读代码时休息一下，我注意到你parent和Sub命名中的模式，因此我考虑到了这一点。

请注意，我还冒昧地切换了您的 id 和 class 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​​​
于 2012-07-08T04:14:12.930 回答
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

​<strong>JavaScript：

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

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

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

于 2012-07-08T04:19:10.873 回答
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​​​​​​​​​​​​​​​​​​​​​​​​​​​​​&lt;/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 脚本（发布表单）中像这样读取它们：

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

$countries = $_POST['countries']; //Gets the array of values for the checked companies
于 2012-07-08T04:19:17.550 回答