Блог

Главная - Вопросы по программированию - Как проверить все дочерние флажки

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

#javascript #jquery #wordpress #checkbox #cmb2

#javascript #jquery #wordpress #флажок #cmb2

Вопрос:

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


});

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

Обновить:

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

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

Комментарии:

1. Это блестяще, это сработало как шарм. Большое спасибо 1