Jquery 檢查父母復選框

Question

檢查下面的代碼。 這里AAA和BBB是根父菜單。 我已經做的是，當我單擊AAA時，它會檢查其所有子復選框，並且當我單擊AAA1時，它會選中其所有子復選框。 但問題是當一個子復選框被選中時，它的主根父菜單也應該被選中，這不起作用。 檢查 Jquery 零件。 我已經嘗試過$(this).parent().parent().parent().parent().find('.parent_checkbox').prop("checked", this.checked); 但這不會選擇其根父級。 我該如何解決？

JsFiddle 鏈接

Jquery：

$("body").on("change", ".parent_checkbox", function () {
        $(this).parent().parent().parent().parent().find('.child1_checkbox').prop("checked", this.checked);
        $(this).parent().parent().parent().parent().find('.child2_checkbox').prop("checked", this.checked);
    });
    $("body").on("change", ".child1_checkbox", function () {
        $(this).parent().parent().parent().parent().find('.child2_checkbox').prop("checked", this.checked);
    });
    $("body").on("change", ".child2_checkbox", function () {
        console.log(this);
        $(this).parent().parent().parent().parent().find('.parent_checkbox').prop("checked", this.checked);
    });

Html：

<div class="accordion-group" id="CollapsibleItemPlaceHolder">
  <div class="EachCategorySet">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" href="#child_b1045" aria-expanded="true"><small>AAA</small></a>
      <div class="checkbox"><label class="checkbox-container"><input type="checkbox" class="css-checkbox parent_checkbox" name="selectall" value="1045"><span data-ripple="" class="bg-primary-darker checkmark"></span></label></div>
    </div>
    <div id="child_b1045" class="accordion-body collapse show">
      <div class="accordion-inner">
        <div class="accordion">
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" href="#child_c1047" aria-expanded="true"><small>AAA1</small></a>
              <div class="checkbox"><label class="checkbox-container"><input type="checkbox" class="css-checkbox child1_checkbox" name="selectall" value="1047"><span data-ripple="" class="bg-primary-darker checkmark"></span></label></div>
            </div>
            <div id="child_c1047" class="accordion-body collapse show">
              <div class="accordion-inner">
                <div class="accordion-group">
                  <div class="accordion-heading">
                    <a class="" data-toggle="" href="#child_c1048"><small>AAA2</small></a>
                    <div class="checkbox"><label class="checkbox-container"><input type="checkbox" class="css-checkbox child2_checkbox" name="selectall" value="1048"><span data-ripple="" class="bg-primary-darker checkmark"></span></label></div>
                  </div>
                </div>
              </div>
            </div>
            <div id="child_c1047" class="accordion-body collapse show">
              <div class="accordion-inner">
                <div class="accordion-group">
                  <div class="accordion-heading">
                    <a class="" data-toggle="" href="#child_c1049"><small>CCC</small></a>
                    <div class="checkbox"><label class="checkbox-container"><input type="checkbox" class="css-checkbox child2_checkbox" name="selectall" value="1049"><span data-ripple="" class="bg-primary-darker checkmark"></span></label></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div class="EachCategorySet">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" href="#child_b1046"><small>BBB</small></a>
      <div class="checkbox"><label class="checkbox-container"><input type="checkbox" class="css-checkbox parent_checkbox" name="selectall" value="1046"><span data-ripple="" class="bg-primary-darker checkmark"></span></label></div>
    </div>
  </div>
</div>

Answer 1

我建議你看看 parents() 和最接近的()。 使用最接近（），您可以搜索觸發您知道的事件的元素的最近父級，並使用它來查找另一個項目：

$('body').on('change', 'input', function() {
  $(this).closest('.the-parent-that-i-need').find('.another-item').doStuff();
});

Answer 2

正如@Frenchy 所描述的，我必須在父母之外尋找。 我像下面這樣修復了這個：

$(this).closest('.EachCategorySet').find(".parent_checkbox").prop("checked", this.checked);