Как проверить все дочерние флажки - PullRequest
Новая
       21

Как проверить все дочерние флажки

1 голос
/ 10 апреля 2019

Я использую тип поля 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 );
    });


});

Однако мой код содержит много ошибок! он не позволяет мне снять все дочерние блоки, когда я снова проверяю родительский элемент, а также когда вы устанавливаете флажок на последнем уровне глубины иерархии, он также устанавливает флажок непосредственно рядом с ним на том же уровне!

UPDATE:

Я чувствую, что делаю успехи, но я еще не спокоен. Мой новый код позволяет мне проверять все дочерние флажки из родительского флажка, однако, если я попытаюсь установить любой флажок внутри последнего уровня в глубине моей иерархии, он всегда будет проверять флажок непосредственно под ним. Например, если вы отметите флажок 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 );
        }


    });

1 Ответ

1 голос
/ 11 апреля 2019

Предполагается, что все ваши целевые флажки имеют класс cmb2-option, а элементы списка, которые считаются родителями (или нижним уровнем иерархии), не должны иметь класс cmb2-indented-hierarchy, и они должны ставить / снимать флажки дочерних флажков в ближайшем будущем. <li> Брат, имея класс 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>
...