0

我需要你的帮助来解决我的问题。我创建了一个静态表单。有很多和复选框。我的问题是，我正在集成一个用于选择复选框的 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>
4

3 回答 3

2

超级简单的方法是实际嵌套 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>
于 2013-10-24T08:41:49.860 回答
1

使用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);
   });
});
于 2013-10-24T08:31:37.670 回答
1

一种简单的方法是

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);
});

演示：小提琴

于 2013-10-24T08:31:39.957 回答