选择或取消选择父div中的复选框

Question

我正在使用jQuery手风琴和每个手风琴容器的一组复选框。在每个中，我有2个按钮（选择和取消选择），点击后，我希望它们只选择/取消选择该特定折叠式容器中的所有复选框。这是非常令人沮丧的，因为我确信代码是正确的，所以希望有人会发现我的愚蠢并帮助一个兄弟：

jQuery的：

 // Select all for groups:
   $(".group_buttons").on("click",function() {
       var btn_request = $(this).attr("rel");
       var group = $(this);
       if(btn_request == "add") {
           $(this).parent(".controller_box").find('input:checkbox')
                .attr('checked',true);
       } else {
           $(this).parent(".controller_box").find('input:checkbox')
                .attr('checked', false);
       }
       return false;
   });

示例HTML：

  <div class='controller_box'>
       <a href='' rel='add' class='group_buttons'>Select all</a>
       <a href='' rel='rem' class='group_buttons'>Select all</a>
       <input type='checkbox' name='sample1' value=1 />
       <input type='checkbox' name='sample2' value=1 />
  </div>

Answer 1

您可以使用prop()方法：

  

在特定情况下，属性和属性之间的差异非常重要。在jQuery 1.6之前，.attr（）方法在检索某些属性时有时会考虑属性值，这可能会导致行为不一致。从jQuery 1.6开始，.prop（）方法提供了一种显式检索属性值的方法，而.attr（）则检索属性。

$(".group_buttons").on("click",function() {
   var btn_request = $(this).attr("rel");
   if(btn_request == "add") {
       $(this).parent().find('input[type="checkbox"]').prop('checked', true);
   } else {
       $(this).parent().find('input[type="checkbox"]').prop('checked', false);
   }
   return false;
});

请注意:checkbox选择器为deprecated。

<小时/> 如果动态生成.group_buttons，您应该委派click事件：

$("body").on('click', '.group_buttons', function() {
   var btn_request = $(this).attr("rel");
   if(btn_request == "add") {
       $(this).parent().find('input[type="checkbox"]').prop('checked', true);
   } else {
       $(this).parent().find('input[type="checkbox"]').prop('checked', false);
   }
   return false;
});