Question

我的问题需要你的帮助。我创建了一个静态表单。有很多和复选框。我的问题是，我正在集成一个javascript代码来选择复选框。当用户选中父复选框时，它将自动检查子类别。我可以一个接一个地做（硬编码）。但这是很多工作。我认为我会将所有ID放在一个数组中并创建一个可以访问它们的循环或事件。但我不知道怎么做。好的全部。

这是我的代码：我正在使用CI和jquery 1.5

//here's the array

var checkboxParentMenu = ["checkAllFilipino","checkAllContinental","checkAllAsian","checkAllOthers"];
var checkboxChildMenu = ["filipino_cat","continental_cat","asian_cat","others_cat"];

现在这是手动方式。

$("input[data-check='checkAllFilipino']").change(function(){
        $("#filipino_cat").find("input[type=checkbox]").attr("checked",this.checked);
});

这里是模式样本

<div id="parentTab">

    <div id="categoryTab">
        <input type="checkbox" />
    </div>

        <div id="subCategoryTab">
           <input type="checkbox" />
        </div>

           <div id="childOfSubCategory">
               <input type="checkbox" />
           </div>
    ....
</div>

Answer 1

超级简单的方法是实际嵌套div，然后你可以这样做：

$('input[type=checkbox]').click(function () {
    $(this).parent().find('input[type=checkbox]').attr('checked', $(this).attr('checked'));
});

HTML：

<div id="parentTab">
    <div id="categoryTab">
        <input type="checkbox" />
        <div id="subCategoryTab">
            <input type="checkbox" />
            <div id="childOfSubCategory">
                <input type="checkbox" />
            </div>
        </div>
    </div>
</div>

Answer 2

使用prop()代替attr()喜欢，

var checkboxParentMenu = ["checkAllFilipino","checkAllContinental","checkAllAsian","checkAllOthers"];
var checkboxChildMenu = ["filipino_cat","continental_cat","asian_cat","others_cat"];

$.each(checkboxParentMenu ,function(i,parentChk){
   $("input[data-check='"+parentChk+'").on(change',function(){
      $('#'+checkboxChildMenu[i]).find("input[type=checkbox]").prop("checked",this.checked);
   });
});

Answer 3

一个简单的方法是

var checkboxParentMenu = ["checkAllFilipino", "checkAllContinental", "checkAllAsian", "checkAllOthers"];
var checkboxChildMenu = ["filipino_cat", "continental_cat", "asian_cat", "others_cat"];

$.each(checkboxParentMenu, function (idx, name) {
    $('input[data-check="' + name + '"]').change(function () {
        $("#" + checkboxChildMenu[idx]).find("input[type=checkbox]").attr("checked", this.checked);
    });
})

但我会建议

<input type="checkbox" data-check="checkAllFilipino" data-target="#filipino_cat" />CHECK ALL
<br/>

然后

$('input').filter('[data-check="checkAllFilipino"], [data-check="checkAllContinental"], [data-check="checkAllAsian"], [data-check="checkAllOthers"]').change(function () {
    $($(this).data('target')).find("input[type=checkbox]").attr("checked", this.checked);
});

演示：Fiddle

如何使用带复选框的事件触发器访问ID数组？

3 个答案: