选中最接近div中的所有复选框

时间：2018-10-25 20:20:36

标签： javascript jquery

我一直在尝试从其他帖子中使用它，但是请继续碰壁。

我有一个“全部”按钮，我想在“ apply_all”的最接近div类中全选或取消全选

我正在尝试通过一整套附加的div来实现此目的

        $(document).on('change', '.applyallsearches', (function() {
      		var applyallchecks = $(this).closest('.applyall');
          if (this.checked) {
           applyallchecks.find('input:checkbox').attr('checked'); 
          } else { 
           applyallchecks.find('input:checkbox').removeAttr('checked');
          }
      })
    );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pet_selection">    
Select pets<BR>
    <div>
      <input type="checkbox" class="applyallsearches" value="all">All
    </div>
    <div class="applyall">
      <input type="checkbox" name="apply_all" value="1">Pet 1<BR>
      <input type="checkbox" name="apply_all" value="2">Pet 2<BR>
      <input type="checkbox" name="apply_all" value="3">Pet 3<BR>
      <input type="checkbox" name="apply_all" value="4">Pet 4<BR>
      <input type="checkbox" name="apply_all" value="5">Pet 5<BR>
      <input type="checkbox" name="apply_all" value="6">Pet 6<BR>
      <input type="checkbox" name="apply_all" value="7">Pet 7<BR>
      <input type="checkbox" name="apply_all" value="8">Pet 8<BR>
    </div>
    
    <BR>Select pets<BR>
    <div>
      <input type="checkbox" class="applyallsearches" value="all">All
    </div>
    <div class="applyall">
      <input type="checkbox" name="apply_all" value="1">Pet 1<BR>
      <input type="checkbox" name="apply_all" value="2">Pet 2<BR>
      <input type="checkbox" name="apply_all" value="3">Pet 3<BR>
      <input type="checkbox" name="apply_all" value="4">Pet 4<BR>
      <input type="checkbox" name="apply_all" value="5">Pet 5<BR>
      <input type="checkbox" name="apply_all" value="6">Pet 6<BR>
      <input type="checkbox" name="apply_all" value="7">Pet 7<BR>
      <input type="checkbox" name="apply_all" value="8">Pet 8<BR>
    </div>
    
    <BR>Select pets<BR>
    <div>
      <input type="checkbox" class="applyallsearches" value="all">All
    </div>
    <div class="applyall">
      <input type="checkbox" name="apply_all" value="1">Pet 1<BR>
      <input type="checkbox" name="apply_all" value="2">Pet 2<BR>
      <input type="checkbox" name="apply_all" value="3">Pet 3<BR>
      <input type="checkbox" name="apply_all" value="4">Pet 4<BR>
      <input type="checkbox" name="apply_all" value="5">Pet 5<BR>
      <input type="checkbox" name="apply_all" value="6">Pet 6<BR>
      <input type="checkbox" name="apply_all" value="7">Pet 7<BR>
      <input type="checkbox" name="apply_all" value="8">Pet 8<BR>
    </div>
</div>

2 个答案:

答案 0 :(得分：5)

您可以使用功能$.closest()，然后使用功能$.next()查找下一个兄弟姐妹。

//Event delegation
$(document).on('change', '.applyallsearches', function() {
  $(this).closest('div')
    .next('div.applyall')
    .find('[name="apply_all"]')
    .prop('checked', $(this).prop('checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Select pets<BR><div>  <input type="checkbox" class="applyallsearches" value="all">All</div><div class="applyall">  <input type="checkbox" name="apply_all" value="1">Pet 1<BR>  <input type="checkbox" name="apply_all" value="2">Pet 2<BR>  <input type="checkbox" name="apply_all" value="3">Pet 3<BR>  <input type="checkbox" name="apply_all" value="4">Pet 4<BR>  <input type="checkbox" name="apply_all" value="5">Pet 5<BR>  <input type="checkbox" name="apply_all" value="6">Pet 6<BR>  <input type="checkbox" name="apply_all" value="7">Pet 7<BR>  <input type="checkbox" name="apply_all" value="8">Pet 8<BR></div><BR>Select pets<BR><div>  <input type="checkbox" class="applyallsearches" value="all">All</div><div class="applyall">  <input type="checkbox" name="apply_all" value="1">Pet 1<BR>  <input type="checkbox" name="apply_all" value="2">Pet 2<BR>  <input type="checkbox" name="apply_all" value="3">Pet 3<BR>  <input type="checkbox" name="apply_all" value="4">Pet 4<BR>  <input type="checkbox" name="apply_all" value="5">Pet 5<BR>  <input type="checkbox" name="apply_all" value="6">Pet 6<BR>  <input type="checkbox" name="apply_all" value="7">Pet 7<BR>  <input type="checkbox" name="apply_all" value="8">Pet 8<BR></div><BR>Select pets<BR><div>  <input type="checkbox" class="applyallsearches" value="all">All</div><div class="applyall">  <input type="checkbox" name="apply_all" value="1">Pet 1<BR>  <input type="checkbox" name="apply_all" value="2">Pet 2<BR>  <input type="checkbox" name="apply_all" value="3">Pet 3<BR>  <input type="checkbox" name="apply_all" value="4">Pet 4<BR>  <input type="checkbox" name="apply_all" value="5">Pet 5<BR>  <input type="checkbox" name="apply_all" value="6">Pet 6<BR>  <input type="checkbox" name="apply_all" value="7">Pet 7<BR>  <input type="checkbox" name="apply_all" value="8">Pet 8<BR></div>

答案 1 :(得分：1)

在这里，您可以：（这也适用于附加的div）

$(document).on('change', '.applyallsearches', function() {
          var applyallchecks = $(this).parents('.search-sec').find('[name="apply_all"]');
          if (this.checked) {
           applyallchecks.prop('checked','checked'); 
          } else { 
           applyallchecks.removeAttr('checked');
          }
      })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Select pets<BR>
  <div class="search-sec">
    <div>
      <input type="checkbox" class="applyallsearches" value="all">All
    </div>
    <div class="applyall">
      <input type="checkbox" name="apply_all" value="1">Pet 1<BR>
      <input type="checkbox" name="apply_all" value="2">Pet 2<BR>
      <input type="checkbox" name="apply_all" value="3">Pet 3<BR>
      <input type="checkbox" name="apply_all" value="4">Pet 4<BR>
      <input type="checkbox" name="apply_all" value="5">Pet 5<BR>
      <input type="checkbox" name="apply_all" value="6">Pet 6<BR>
      <input type="checkbox" name="apply_all" value="7">Pet 7<BR>
      <input type="checkbox" name="apply_all" value="8">Pet 8<BR>
    </div>
  </div>
    
    <BR>Select pets<BR>
    <div class="search-sec">
      <div>
        <input type="checkbox" class="applyallsearches" value="all">All
      </div>
      <div class="applyall">
        <input type="checkbox" name="apply_all" value="1">Pet 1<BR>
        <input type="checkbox" name="apply_all" value="2">Pet 2<BR>
        <input type="checkbox" name="apply_all" value="3">Pet 3<BR>
        <input type="checkbox" name="apply_all" value="4">Pet 4<BR>
        <input type="checkbox" name="apply_all" value="5">Pet 5<BR>
        <input type="checkbox" name="apply_all" value="6">Pet 6<BR>
        <input type="checkbox" name="apply_all" value="7">Pet 7<BR>
        <input type="checkbox" name="apply_all" value="8">Pet 8<BR>
      </div>
    </div>
    
    <BR>Select pets<BR>
    <div class="search-sec">
      <div>
        <input type="checkbox" class="applyallsearches" value="all">All
      </div>
      <div class="applyall">
        <input type="checkbox" name="apply_all" value="1">Pet 1<BR>
        <input type="checkbox" name="apply_all" value="2">Pet 2<BR>
        <input type="checkbox" name="apply_all" value="3">Pet 3<BR>
        <input type="checkbox" name="apply_all" value="4">Pet 4<BR>
        <input type="checkbox" name="apply_all" value="5">Pet 5<BR>
        <input type="checkbox" name="apply_all" value="6">Pet 6<BR>
        <input type="checkbox" name="apply_all" value="7">Pet 7<BR>
        <input type="checkbox" name="apply_all" value="8">Pet 8<BR>
      </div>
    </div>

相关问题
最新问题