文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >选择最近的div中的所有复选框

问选择最近的div中的所有复选框
EN

Stack Overflow用户
提问于 2018-10-25 20:20:35
回答 2查看 365关注 0票数 2

我一直在努力让这件事从其他帖子开始运作，但一直在碰壁。

我有一个“所有”按钮，我希望在最近的div类"apply_all“中选择所有或取消选择所有

我试着用一长组附加的div来完成这个任务

​

代码语言：javascript
复制
        $(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');
          }
      })
    );
代码语言：javascript
复制
<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>

​

javascript
jquery
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-10-25 20:49:00

给您：(这对附加的div也是有效的)

​

代码语言：javascript
复制
$(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');
          }
      })
代码语言：javascript
复制
<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>

​

票数 1
EN

Stack Overflow用户

发布于 2018-10-25 20:28:47

您可以使用函数$.closest()，然后使用函数$.next()查找下一个兄弟姐妹，以选择所需的复选框。

​

代码语言：javascript
复制
//Event delegation
$(document).on('change', '.applyallsearches', function() {
  $(this).closest('div')
    .next('div.applyall')
    .find('[name="apply_all"]')
    .prop('checked', $(this).prop('checked'));
});
代码语言：javascript
复制
<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>

​

票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/52997492

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档