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

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>

设想：

如果用户选中复选框，则所有选项也应选中。日期属性应该用于比较。如果它有一个值，它将调用父级的子级（复选框）并检查它。

到目前为止，在我的 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);
});

如果你想避免使用attr()for 选中的属性，你可以手动迭代复选框：

$("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

尝试这个 ：

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

Answer 3

试试这个，使用changejQuery 1.5 中的方法：

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

这是演示