CODEWITHSUNDEEP
javascriptjquery
John Brk
John Brk

Reputation: 67

Jquery check parents checkbox

Check the code bellow. Here AAA and BBB is root parent menu. What i already did is When i click AAA then it checks all its child checkboxes and also when i click AAA1 it selects all its child checkbox. But problem is when a child checkbox is checked then its main root parent menu also should be checked and this not works. Check the Jquery part. I already tried like $(this).parent().parent().parent().parent().find('.parent_checkbox').prop("checked", this.checked); but this not selects its root parent. How can i fix it?

JsFiddle Link

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>

Upvotes: 0

Views: 43

Answers (2)

John Brk
John Brk

Reputation: 67

As @Frenchy described i have to search outside parents. I fixed this like bellow:

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

Upvotes: 0

Alex
Alex

Reputation: 10226

I suggest you take a look at parents() and closest(). With closest(), you can search for the closest parent of an element triggering an event that you know of and use that to find another item:

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

Upvotes: 1

Related Questions