Check the parent checkbox with . jQuery

Question

Basically I am trying to write a js func that if I check a child checkbox the parent checkbox also checks, if not already checked. I am using jquery here is my html:

<div class="checkboxes right">
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده  </label>
<div class="child"><label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
</div>
</div>
<div class="sepp"></div>
<div class="checkboxes left">
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<div class="child"><label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
</div>
</div>

  <script>
        $(document).ready(function() {
$('.child input').change(function() {
    if ($(this).is(':checked')) {
        $(this).closest('ul').siblings('input:checkbox').attr('checked', true);
    }
});
    });
        </script>

there are no `ul` elements – Arun P Johny Sep 20 '14 at 16:44 — Arun P Johny, Sep 20 '14 at 16:44

score 0 · Answer 1 · answered Sep 20 '14 at 16:46

0

Use .prop instead of .attr for checked/disabled. See prop documentation.

Then id must be unique in an HTML page, many things won't work instead.

There is no ul has ancestor of your inputs.

answered Sep 20 '14 at 16:46

Nicolas Albert

2,586
1
16
16

score 0 · Accepted Answer · answered Sep 20 '14 at 17:07

You just have to traverse the DOM to get to the "parent" checkbox. Going up two levels of parents will take you to <div class="child"> and .prev() will select the label before the div. Finally, .find("input") will locate the input element for the parent's label.

I had to remove the for attributes because they were causing issues (and aren't necessary in this case), and having a bunch of the same ids isn't good, either.

$(document).ready(function() {
    $('.child input').change(function() {
        if ($(this).is(':checked')) {
            $(this).parent().parent().prev().find("input").prop('checked', true);
        }
    });
});

div.child {
  padding-left: 2em;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="checkboxes right">
    <label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده  </label>
    <div class="child">
        <label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label><br>
        <label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label><br>
        <label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label><br>
        <label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label><br>
        <label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label><br>
    </div>
</div>
<div class="sepp"></div>
<div class="checkboxes left">
    <label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
    <div class="child">
        <label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label><br>
        <label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label><br>
        <label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label><br>
        <label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label><br>
        <label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
    </div>
</div>

Check the parent checkbox with . jQuery

2 Answers2