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()，您可以手动迭代复选框:

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