如何选中所有子复选框

Question

我正在使用 cmb2 taxonomy_multicheck_hierarchical 字段类型以分层格式显示我的类别，但是我有很多术语，它们目前在层次结构中有 3 个层次。

如果父项选中，我想选中所有子项，如果父项未选中，我想取消选中所有子项。

下面是我需要处理的 html 渲染部分：

<ul class="cmb2-checkbox-list cmb2-list">
  <li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location1" value="england" data-hash="6u5db7f23u40"> <label for="supplier_location1">England</label></li>
  <li class="cmb2-indented-hierarchy">
    <ul>
      <li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location2" value="east-midlands" data-hash="6u5db7f23u40"> <label for="supplier_location2">East Midlands</label></li>
      <li class="cmb2-indented-hierarchy">
        <ul>
          <li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location3" value="derbyshire" data-hash="6u5db7f23u40"> <label for="supplier_location3">Derbyshire</label></li>
          <li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location4" value="leicestershire" data-hash="6u5db7f23u40"> <label for="supplier_location4">Leicestershire</label></li>
          <li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location5" value="lincolnshire" data-hash="6u5db7f23u40"> <label for="supplier_location5">Lincolnshire</label></li>
          <li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location6" value="northhamptonshire" data-hash="6u5db7f23u40"> <label for="supplier_location6">Northhamptonshire</label></li>
          <li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location7" value="rutland" data-hash="6u5db7f23u40"> <label for="supplier_location7">Rutland</label></li>
        </ul>
      </li>
      <li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location8" value="east-of-england" data-hash="6u5db7f23u40"> <label for="supplier_location8">East of England</label></li>
      <li class="cmb2-indented-hierarchy">
        <ul>
          <li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location9" value="bedfordshire" data-hash="6u5db7f23u40"> <label for="supplier_location9">Bedfordshire</label></li>
          <li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location10" value="cambridgeshire" data-hash="6u5db7f23u40"> <label for="supplier_location10">Cambridgeshire</label></li>
          <li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location11" value="essex" data-hash="6u5db7f23u40"> <label for="supplier_location11">Essex</label></li>
          <li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location12" value="hertfordshire" data-hash="6u5db7f23u40"> <label for="supplier_location12">Hertfordshire</label></li>
          <li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location13" value="norfolk" data-hash="6u5db7f23u40"> <label for="supplier_location13">Norfolk</label></li>
          <li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location14" value="suffolk" data-hash="6u5db7f23u40"> <label for="supplier_location14">Suffolk</label></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location15" value="scotland" data-hash="6u5db7f23u40"> <label for="supplier_location15">Scotland</label></li>
</ul>

我尝试的javascript代码如下：

jQuery( document ).ready(function( $ ) {

    $('#supplier_location_container input[type="checkbox"]').click(function(){
        $('input[type="checkbox"]', $(this).closest('li').next()).prop( 'checked', true );
    });

    $('#supplier_location_container input[type="checkbox"]:checked').click(function(){
        $('input[type="checkbox"]', $(this).closest('li').next()).prop( 'checked', false );
    });


});

但是我的代码包含很多错误！当我再次检查父项时，它不允许我取消选中所有子框，而且当您选中层次结构的最后一层的任何框时，它还会在同一级别直接选中它旁边的框！

更新：

我觉得我正在进步，但我还没有安静下来。我的新代码允许我检查父复选框中的所有子复选框，但是如果我尝试检查我的层次结构的最后一层内的任何复选框，它总是会直接检查它下面的复选框。例如，如果您选中复选框 ID supplier_location3，它还会选中 supplier_location 4!

$('#supplier_location_container input[type="checkbox"]').click(function(){

        if($(this).is(':checked')){
            $('input[type="checkbox"]', $(this).closest('li').next()).prop( 'checked', true );
        }else{
            $('input[type="checkbox"]', $(this).closest('li').next()).prop( 'checked', false );
        }


    });

Answer 1

假设，您的目标复选框都有 class cmb2-option，并且被视为父级（或层次结构的底层）的列表项不应具有 class cmb2-indented-hierarchy ，并且他们应该 check/uncheck 直接 <li> 兄弟中的子复选框，具有 class cmb2-indented-hierarchy，我将通过以下方式实现该逻辑：

$('.cmb2-option').on('click', function(){
  //grab parent checkbox state
 const checkState = this.checked;
  //grab immediate sibling of parent <li> node
 const childListItem = $(this).closest('li:not(".cmb2-indented-hierarchy")').next('li.cmb2-indented-hierarchy');
  //exit if no child list available
 if(childListItem.length == 0) return;
  //iterate through child checkboxes and adjust their state according to parent
 [...childListItem.find('.cmb2-option')].forEach(childCheckbox => childCheckbox.checked = checkState);
});

<!doctype html>
<html>
<head>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<ul class="cmb2-checkbox-list cmb2-list">
  <li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location1" value="england" data-hash="6u5db7f23u40"> <label for="supplier_location1">England</label></li>
  <li class="cmb2-indented-hierarchy">
    <ul>
      <li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location2" value="east-midlands" data-hash="6u5db7f23u40"> <label for="supplier_location2">East Midlands</label></li>
      <li class="cmb2-indented-hierarchy">
        <ul>
          <li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location3" value="derbyshire" data-hash="6u5db7f23u40"> <label for="supplier_location3">Derbyshire</label></li>
          <li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location4" value="leicestershire" data-hash="6u5db7f23u40"> <label for="supplier_location4">Leicestershire</label></li>
          <li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location5" value="lincolnshire" data-hash="6u5db7f23u40"> <label for="supplier_location5">Lincolnshire</label></li>
          <li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location6" value="northhamptonshire" data-hash="6u5db7f23u40"> <label for="supplier_location6">Northhamptonshire</label></li>
          <li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location7" value="rutland" data-hash="6u5db7f23u40"> <label for="supplier_location7">Rutland</label></li>
        </ul>
      </li>
      <li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location8" value="east-of-england" data-hash="6u5db7f23u40"> <label for="supplier_location8">East of England</label></li>
      <li class="cmb2-indented-hierarchy">
        <ul>
          <li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location9" value="bedfordshire" data-hash="6u5db7f23u40"> <label for="supplier_location9">Bedfordshire</label></li>
          <li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location10" value="cambridgeshire" data-hash="6u5db7f23u40"> <label for="supplier_location10">Cambridgeshire</label></li>
          <li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location11" value="essex" data-hash="6u5db7f23u40"> <label for="supplier_location11">Essex</label></li>
          <li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location12" value="hertfordshire" data-hash="6u5db7f23u40"> <label for="supplier_location12">Hertfordshire</label></li>
          <li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location13" value="norfolk" data-hash="6u5db7f23u40"> <label for="supplier_location13">Norfolk</label></li>
          <li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location14" value="suffolk" data-hash="6u5db7f23u40"> <label for="supplier_location14">Suffolk</label></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location15" value="scotland" data-hash="6u5db7f23u40"> <label for="supplier_location15">Scotland</label></li>
</ul>
</body>
</html>

如何选中所有子复选框

How to check all child checkboxes

javascript

jquery

wordpress

checkbox

cmb2