Question

我希望你能解决我的问题。这是我的示例代码

<input type="checkbox" data-attr="getAllChoices" />

<div id="parent">

     <div id="child1">
         <input type="checkbox" value="3"/>Choice A
     </div>

     <div id="child2">
         <input type="checkbox" value="5"/>Choice B
     </div>

     <div id="child3">
         <input type="checkbox" value="6"/>Choice C
     </div>

</div>

情景：

如果用户选中该复选框，则还应检查所有选项。 date-attr应该用于比较。如果它有一个值，它将调用父项的子项（复选框）并检查它。

到目前为止我的js中有这个。但我不知道如何调用其他复选框。我所知道的唯一一件事就是通过访问子div来调用复选框。

$("input[data-attr='checkAll']").on('change',function(){
     //no idea. . . . . 
});

顺便说一句，我使用的是jquery 1.5

Answer 1

我没有看到data-check属性。因此，请尝试使用data-attr属性：

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

如果您想避免对checked属性使用attr()，可以手动迭代复选框：

$("input[data-attr='getAllChoices']").bind('change',function(){
    var isChecked = this.checked;
    $('#parent').find('input[type=checkbox]').each(function(i, val){
        val.checked = isChecked;
    });
});

Answer 2

试试这个，在jQuery 1.5中使用change方法：

$(document).ready(function () {
     $('input[data-attr="checkAll"]').change(function () {
            $('#parent').find('input[type=checkbox]').attr('checked', this.checked);
            //OR
            // $('#parent input[type=checkbox]').attr('checked', this.checked);
     });
});

以下是 Demo

Answer 3

试试这个：

$("input[data-attr='getAllChoices']").bind('change', function () {
    $('#parent input[type="checkbox"]').attr('checked', this.checked)
});

如何使用事件触发器和自定义属性获取元素的子元素？

3 个答案: