如何选择内选择的元素

这里的所有div是我的HTML代码如何选择内选择的元素

<div class="panel-body"> 
    <p> <input name="select_all" type="checkbox" value="1"> Select/Deselect All</p> 

    <div class="input-group"><span class="input-group-addon"> 
     <span><input checked="checked" name="manage_group" type="checkbox" value="1"></span> 
     <span class="form-control">Create/manage groups of candidates</span 
    </div> 

    <div class="input-group"><span class="input-group-addon"> 
     <span><input checked="checked" name="manage_candidate" type="checkbox" value="1"></span> 
     <span class="form-control">Modify candidate details</span> 
    </div> 
</div>

我要检查所有的复选框（在父DIV）如果“SELECT_ALL”复选框被选中，并取消所有，如果'select_all'未选中。

这里是我的jQuery代码：

$(".panel-body p input[type='checkbox']").click(function() { 
    if(this.checked){ 
     //alert('Checked'); 
     var selected = this.closest(".panel-body"); 
     $(selected+"div input[type='checkbox']").each(function() { 
      alert ('Hi'); 
     }); 
    }else{ 
    } 
});

但它无法正常工作。它不接受选择器内的“选定”变量。如何选择所选元素中的所有复选框？

来源

2016-03-07 Vijai Pandey

尝试这样的，因为选择已经是一个jQuery选择： 'selected.find（“DIV输入[类型='checkbox']“）' –

selected.find（）does not't work。 Uncaught TypeError：selected.find不是函数 –

你的问题是这样的一行： -

this.closest(".panel-body");

其中this是元素而不是jQuery对象。

你可以达到你想要的东西，像这样： -

$(".panel-body p input[type='checkbox']").change(function() { 
 
    var selected = $(this).closest(".panel-body"); 
 
    selected.find("div input[type='checkbox']").prop('checked', this.checked); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="panel-body"> 
 
    <p> 
 
    <input name="select_all" type="checkbox" value="1">Select/Deselect All</p> 
 

 
    <div class="input-group"><span class="input-group-addon"> 
 
      <input checked="checked" name="manage_group" type="checkbox" value="1"></span> 
 
    <span class="form-control">Create/manage groups of candidates</span> 
 
    </div> 
 

 
    <div class="input-group"><span class="input-group-addon"> 
 
      <input checked="checked" name="manage_candidate" type="checkbox" value="1"></span> 
 
    <span class="form-control">Modify candidate details</span> 
 
    </div> 
 

 
</div>

来源

2016-03-07 08:49:19 BenG

非常感谢@BenG，我在这里发表了这篇文章之前几个小时，让我感到头疼。不仅你解决了这个问题，你还教育了我更多的jquery。非常感谢你。 –

你可以像下面这样做。查找所有checkbox最接近的.panel-body，并根据select_all状态更改checked属性。

$(":checkbox[name=select_all]").change(function() { 
 
    $(this).closest('.panel-body').find(':checkbox').not(this).prop('checked', this.checked); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="panel-body"> 
 
    <p> <input name="select_all" type="checkbox" value="1"> Select/Deselect All</p> 
 

 
    <div class="input-group"> 
 
     <span class="input-group-addon"> 
 
      <input checked="checked" name="manage_group" type="checkbox" value="1"> 
 
     </span> 
 
     <span class="form-control">Create/manage groups of candidates</span> 
 
    </div> 
 
    <div class="input-group"> 
 
     <span class="input-group-addon"> 
 
      <input checked="checked" name="manage_candidate" type="checkbox" value="1"> 
 
     </span> 
 
     <span class="form-control">Modify candidate details</span> 
 
    </div> 
 
</div>

来源

2016-03-07 08:48:26 Azim

这很有效。谢谢@Azim –

如何选择内选择的元素

回答

相关问题