javascript - 全选/取消全选复选框父 DIV 下的任何内容

Question

我正在选择全部/取消选择所有复选框。我在 jquery 代码中缺少一些选择复选框。

$("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);
    });
  }
});

<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>

Answer 1

您将 target 用一个 div 括起来，因此您应该使用 .parents 来查找公共(public) parent应该是.outer-part。

$("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);
  }
   
});

<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>