文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >选择全部/取消选择所有复选框parent DIV下的任何内容

问选择全部/取消选择所有复选框parent DIV下的任何内容
EN

Stack Overflow用户
提问于 2015-07-08 03:13:41
回答 5查看 1.2K关注 0票数 0

我正在执行全选/取消全选复选框。我在jquery代码中遗漏了一些选择复选框。

​

代码语言：javascript
复制
$("div[id^='divSelectAll'] input[id^='chk_'").click(function() {
  //alert(this.checked);
  if (this.checked) { // check select status
    $(this).parent().find('input[type="checkbox"]').prop('checked', true);
  } else {
    $('.checkbox1').each(function() {
      $(this).parent().find('input[type="checkbox"]').prop('checked', false);
    });
  }
});
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row outer-part col-md-offset-1">
  <div class="col-md-12 TechDiscSelectAll" id="divSelectAll_DRILLING">
    <input id="chk_DRILLING" name="chk_DRILLING" type="checkbox" value="true">
    <input name="chk_DRILLING" type="hidden" value="false">&nbsp; Select All / Unselect All <a id="lnkViewAll_DRILLING" class="NoWrap">View All Descriptions</a>
  </div>

  <div class="row padding-4">
    <div class="col-md-12">
      <input  id="CPDI" name="CPDI" type="checkbox" value="false">
      <input name="CPDI" type="hidden" value="false">Completion Planning
    </div>

  </div>
  <div class="row padding-4">
    <div class="col-md-12">
      <input  id="DDA" name="DDA" type="checkbox" value="false">
      <input name="DDA" type="hidden" value="false">Drilling
    </div>

  </div>

​

javascript
jquery
EN

回答 5

Stack Overflow用户

发布于 2015-07-08 03:25:23

您使用一个div封装target，因此您应该使用.parents来查找应该为.outer-part的公共parent。

​

代码语言：javascript
复制
$("div[id^='divSelectAll'] input[id^='chk_']").click(function() {
  alert(this.checked);
  $(this).parents(".outer-part").find('input[type="checkbox"]').prop('checked', this.checked);
});

$("input[type='checkbox']:not([id^='chk_']").click(function() {
  // Get parents
  var $parent = $(this).parents(".outer-part");
  // Create selctor for check condition
  var checkedSelector = this.checked ? ":checked" : ":not(:checked)";
  // Create selector to get all checkbox exclude select all.
  var exluceSelector = 'input[type="checkbox"]:not([id^="chk_"])';
  // Get items
  var boxes  = $parent.find(exluceSelector);
  // Check if length after filter is the same.
  if (boxes.length === boxes.filter(checkedSelector).length) {
    console.log(this.checked);
    $("input[id^='chk_']").prop('checked', this.checked);
  }
   
});
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row outer-part col-md-offset-1">
  <div class="col-md-12 TechDiscSelectAll" id="divSelectAll_DRILLING">
    <input id="chk_DRILLING" name="chk_DRILLING" type="checkbox" value="true">
    <input name="chk_DRILLING" type="hidden" value="false">&nbsp; Select All / Unselect All <a id="lnkViewAll_DRILLING" class="NoWrap">View All Descriptions</a>
  </div>

  <div class="row padding-4">
    <div class="col-md-12">
      <input checked="checked" id="CPDI" name="CPDI" type="checkbox" value="true">
      <input name="CPDI" type="hidden" value="false">Completion Planning
    </div>

  </div>
  <div class="row padding-4">
    <div class="col-md-12">
      <input checked="checked" id="DDA" name="DDA" type="checkbox" value="true">
      <input name="DDA" type="hidden" value="false">Drilling
    </div>

  </div>

​

票数 2
EN

Stack Overflow用户

发布于 2015-07-08 03:24:40

代码有两个问题：

check all不是必需的，因为没有任何带有类的复选框，因此checkbox1.

  • Doing $('.checkbox1').each(function() {是不够的，因为您将只转到包含"check $(this).parent()“复选框的div，您需要执行以下操作

一旦解决了这个问题，它似乎就可以正常工作了：

​

代码语言：javascript
复制
$("div[id^='divSelectAll'] input[id^='chk_'").click(function() {
    console.log(this.checked);
    if (this.checked) { // check select status
        $(this).parent().parent().find('input[type="checkbox"]').prop('checked', true);
    } else {
        //$('.checkbox1').each(function () {
            $(this).parent().parent().find('input[type="checkbox"]').prop('checked', false);
       // });
    }
});
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row outer-part col-md-offset-1">
  <div class="col-md-12 TechDiscSelectAll" id="divSelectAll_DRILLING">
    <input id="chk_DRILLING" name="chk_DRILLING" type="checkbox" value="true">
    <input name="chk_DRILLING" type="hidden" value="false">&nbsp; Select All / Unselect All <a id="lnkViewAll_DRILLING" class="NoWrap">View All Descriptions</a>
  </div>

  <div class="row padding-4">
    <div class="col-md-12">
      <input checked="checked" id="CPDI" name="CPDI" type="checkbox" value="true">
      <input name="CPDI" type="hidden" value="false">Completion Planning
    </div>

  </div>
  <div class="row padding-4">
    <div class="col-md-12">
      <input checked="checked" id="DDA" name="DDA" type="checkbox" value="true">
      <input name="DDA" type="hidden" value="false">Drilling
    </div>

  </div>

​

要在选中全部/非全部复选框时取消选中/取消选中全选复选框，您需要为每个复选框添加一个监听器

​

代码语言：javascript
复制
$("div[id^='divSelectAll'] input[id^='chk_'").click(function() {
    console.log(this.checked);
    if (this.checked) { // check select status
        $(this).parent().parent().find('input[type="checkbox"]').prop('checked', true);
    } else {
        //$('.checkbox1').each(function () {
            $(this).parent().parent().find('input[type="checkbox"]').prop('checked', false);
       // });
    }
    });

$(".outer-part div:not(div[id^='divSelectAll']) input[type='checkbox']").click(function() {
    if ($(".outer-part div:not(div[id^='divSelectAll']) input[type='checkbox']:checked").length < $(".outer-part div:not(div[id^='divSelectAll']) input[type='checkbox']").length) {
        console.log("not all checked");
        $(this).parent().parent().parent().find("div[id^='divSelectAll'] input[id^='chk_']").prop("checked", false);
    } else {
        console.log("all checked");
        $(this).parent().parent().parent().find("div[id^='divSelectAll'] input[id^='chk_']").prop("checked", true);
    }
});
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row outer-part col-md-offset-1">
  <div class="col-md-12 TechDiscSelectAll" id="divSelectAll_DRILLING">
    <input id="chk_DRILLING" name="chk_DRILLING" type="checkbox" value="true">
    <input name="chk_DRILLING" type="hidden" value="false">&nbsp; Select All / Unselect All <a id="lnkViewAll_DRILLING" class="NoWrap">View All Descriptions</a>
  </div>

  <div class="row padding-4">
    <div class="col-md-12">
      <input checked="checked" id="CPDI" name="CPDI" type="checkbox" value="true">
      <input name="CPDI" type="hidden" value="false">Completion Planning
    </div>

  </div>
  <div class="row padding-4">
    <div class="col-md-12">
      <input checked="checked" id="DDA" name="DDA" type="checkbox" value="true">
      <input name="DDA" type="hidden" value="false">Drilling
    </div>

  </div>

​

这可以通过使用.parents()并删除if子句并按照fuyushimoya的建议将值直接赋值给复选框来简化(您可能也可以简化选择器，现在它看起来很难看)。

进行这两个更改的结果代码将如下所示：

​

代码语言：javascript
复制
$("div[id^='divSelectAll'] input[id^='chk_'").click(function() {
    $(this).parents(".outer-part").find('input[type="checkbox"]').prop('checked', this.checked);
});

$(".outer-part div:not(div[id^='divSelectAll']) input[type='checkbox']").click(function() {
    $(this).parents(".outer-part").find("div[id^='divSelectAll'] input[id^='chk_']").prop("checked", $(".outer-part div:not(div[id^='divSelectAll']) input[type='checkbox']:checked").length == $(".outer-part div:not(div[id^='divSelectAll']) input[type='checkbox']").length);
});
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row outer-part col-md-offset-1">
  <div class="col-md-12 TechDiscSelectAll" id="divSelectAll_DRILLING">
    <input id="chk_DRILLING" name="chk_DRILLING" type="checkbox" value="true">
    <input name="chk_DRILLING" type="hidden" value="false">&nbsp; Select All / Unselect All <a id="lnkViewAll_DRILLING" class="NoWrap">View All Descriptions</a>
  </div>

  <div class="row padding-4">
    <div class="col-md-12">
      <input checked="checked" id="CPDI" name="CPDI" type="checkbox" value="true">
      <input name="CPDI" type="hidden" value="false">Completion Planning
    </div>

  </div>
  <div class="row padding-4">
    <div class="col-md-12">
      <input checked="checked" id="DDA" name="DDA" type="checkbox" value="true">
      <input name="DDA" type="hidden" value="false">Drilling
    </div>

  </div>

​

票数 0
EN

Stack Overflow用户

发布于 2015-07-08 03:28:29

糟糕的html格式会导致人为错误。

下面的代码运行良好。

代码语言：javascript
复制
$("div[id^='divSelectAll'] input[id^='chk_'").change(function () {
    if (this.checked) { // check select status
        $(this).parent().find('input[type="checkbox"]').prop('checked', true);
    } else {
        $(this).parent().parent().find('input[type="checkbox"]').prop('checked', false);
    }
});

<div class="row outer-part col-md-offset-1">
    <div class="col-md-12 TechDiscSelectAll" id="divSelectAll_DRILLING">
        <input id="chk_DRILLING" name="chk_DRILLING" type="checkbox" value="true">
        <input name="chk_DRILLING" type="hidden" value="false">&nbsp; Select All / Unselect All <a id="lnkViewAll_DRILLING" class="NoWrap">View All Descriptions</a>

    </div>
    <div class="row padding-4">
        <div class="col-md-12">
            <input checked="checked" id="CPDI" name="CPDI" type="checkbox" value="true">
            <input name="CPDI" type="hidden" value="false">Completion Planning</div>
    </div>
    <div class="row padding-4">
        <div class="col-md-12">
            <input checked="checked" id="DDA" name="DDA" type="checkbox" value="true">
            <input name="DDA" type="hidden" value="false">Drilling</div>
    </div>
</div>

JsFiddle

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

https://stackoverflow.com/questions/31277374

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

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

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

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

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