Как установить флажок этого специального родителя при выборе дочернего элемента

Question

У меня возникли проблемы с установкой этого флажка с родительским флажком. Мне нужно, чтобы родительский флажок автоматически выбирался всякий раз, когда выбран ребенок. Вот мой HTML. Одна вещь, которая является небольшая проблема в том, что родительский DIV нужно выбрать имеет тот же класс, как один непосредственно выше в иерархии, которая .checkbox

<ul class="term-reference"> 
    <li> 
     <div class="checkbox"> 
      <label class="control-label"> 
       <input type="checkbox" class="form-checkbox">Parent Label 
      </label> 
     </div> 
     <ul class="term-reference"> 
      <li> 
       <div class="checkbox"> 
        <label class="control-label""> 
         <input type="checkbox" class="form-checkbox">Child Label 
        </label> 
       </div> 
      </li> 
     </ul> 
    </li> 
</ul> 

Я попытался следующие, но безрезультатно, спасибо очень много для любой помощи здесь

$('ul.term-reference li ul li input.form-checkbox').click(function() { 
    $(this).closest('.checkbox').closest('.checkbox').find('input.form-checkbox').prop('checked', true); 
}); 

Answer 1

Хотя ответы, которые я прочитал здесь, скорее всего, будут работать, они, похоже, тесно связаны с html (это означает, что если вы измените свой html, ваш jQuery может не работать) и не будут повторно использоваться (и возможность проверки других флажков, даже если они не должны быть).

Я бы рекомендовал прочитать Decoupling Your HTML, CSS, and JavaScript - Philip Walton @ Google.

Незначительное обновление для вашего HTML и многоразовой JQuery:

$(document).ready(function(){ 
 
     $('.checkbox-container .checkbox-child').on('click', function() { 
 
     var $childCheckbox = $(this); 
 
     if ($childCheckbox.is(":checked")){ 
 
      $childCheckbox 
 
      .closest('.checkbox-container') 
 
      .find('.checkbox-parent') 
 
      .prop("checked", true); 
 
     } 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="term-reference checkbox-container"> 
 
    <li> 
 
    <div class="checkbox"> 
 
     <label class="control-label"> 
 
     <input type="checkbox" class="form-checkbox checkbox-parent">Parent Label 
 
    \t  </label> 
 
    </div> 
 
    <ul class="term-reference"> 
 
     <li> 
 
     <div class="checkbox"> 
 
      <label class="control-label""> 
 
      <input type="checkbox" class="form-checkbox checkbox-child">Child Label 
 
      </label> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <div class="checkbox"> 
 
      <label class="control-label""> 
 
      <input type="checkbox" class="form-checkbox checkbox-child">Child Label 
 
      </label> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <div class="checkbox"> 
 
      <label class="control-label""> 
 
      <input type="checkbox" class="form-checkbox checkbox-child">Child Label 
 
      </label> 
 
     </div> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 2

Вы можете попробовать с parent

$(this).parent().closest('.checkbox').find('input.form-checkbox').prop('checked', true); 

Answer 3

класс верхний флажок не предок, поэтому у ou нужно подойти два ближайших li элементов, затем класс ребенка, а затем найти input[type="checkbox"].