jQuery check the parent checkbox if the child checkbox is checked

Question

I want to make a logic that if a child checkbox is checked, it checks the parent checkbox too. The input can parent, child and both:

<input type="checkbox" name="checkbox[$counter]" class="parent" />
<input type="checkbox" name="checkbox[$counter]" class="child" />
<input type="checkbox" name="checkbox[$counter]" class="parent child" />

This structure:

• 1
  • 2
  • 3
• 4
  • 5
    • 6
    • 7

will be look like this:

<table class="table">
  <tr>
    <td>
      <input type="checkbox" name="checkbox[1]" class="parent" />
    </td>
    <td>
     .
     .
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="checkbox[2]" class="child" />
    </td>
    <td>
     .
     .
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="checkbox[3]" class="child" />
    </td>
    <td>
     .
     .
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="checkbox[4]" class="parent" />
    </td>
    <td>
     .
     .
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="checkbox[5]" class="child parent" />
    </td>
    <td>
     .
     .
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="checkbox[6]" class="child" />
    </td>
    <td>
     .
     .
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="checkbox[7]" class="child" />
    </td>
    <td>
     .
     .
  </tr>
</table>

I want if I check 3, it checks 1 and if I check 6 it checks 5 and 4, too.

Also the checkboxes are in separate table rows, becouse I want to show some information structured in table next to the checkbox.

Can you show me a script what does it? I tried this, but it's not working:

$(document).ready(function() {
    $('input.child').change(function() {
        if ($(this).is(':checked')) {
            $(this).closest('input.parent:checkbox').attr('checked', true);
        }
    });
});

Answer 1

The checkboxes are not parent-child relationship, thus the method .closest() will not work as it traverse's up starting from itself.

I would recommend you to assign classes with TR element and also attach event handler with them, traversing DOM will be easy.

<tr class="parent">...</tr>
<tr class="child">...</tr>

You could use combination of .prevAll() and .first() to get the targeted TR, then use .find() to get the checkbox.

Additionally, If you want to fire the change event trigger() method can be used.

$(document).ready(function() {
  $('.child').on('change', ':checkbox', function() {
    if ($(this).is(':checked')) {
      var currentRow = $(this).closest('tr');
      var targetedRow = currentRow.prevAll('.parent').first();
      var targetedCheckbox = targetedRow.find(':checkbox');
      targetedCheckbox.prop('checked', true).trigger('change');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table class="table">
  <tr class="parent">
    <td>
      <input type="checkbox" name="checkbox[1]" />
    </td>
  </tr>
  <tr class="child">
    <td>
      <input type="checkbox" name="checkbox[2]" />
    </td>
  </tr>
  <tr class="child">
    <td>
      <input type="checkbox" name="checkbox[3]" />
    </td>
  </tr>
  <tr class="parent">
    <td>
      <input type="checkbox" name="checkbox[4]" />
    </td>
  </tr>
  <tr class="child parent">
    <td>
      <input type="checkbox" name="checkbox[5]" />
    </td>
  </tr>
  <tr class="child">
    <td>
      <input type="checkbox" name="checkbox[6]" />
    </td>
  </tr>
  <tr class="child">
    <td>
      <input type="checkbox" name="checkbox[7]" />
    </td>
  </tr>
</table>

Answer 2

With your current html structure you need make a link between childs and parents, for example with data attribute, now it works with any html structure, table, ul li or without these.

$(document).ready(function() {
  $('input.child').on('change', function() {
    var data = $(this).data('name');

    if (this.checked) {
      $('input.parent:checkbox[data-name="' + data + '"]').prop('checked', true);
      $('input.parent:checkbox[data-parent="' + data + '"]').prop('checked', true);
    } else {
      $('input.parent:checkbox[data-name="' + data + '"]').prop('checked', false);
      $('input.parent:checkbox[data-parent="' + data + '"]').prop('checked', false);
    }
  });
});

/* Optional, This is what I added for better look */

$('.child').each(function() {
  $(this).parent().css({
    paddingLeft: 20,
    backgroundColor: '#c0c0c0'
  });
});

$('.parent').each(function() {
  $(this).parent().css({
    backgroundColor: 'black'
  });
});

td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <tr>
    <td>
      <input type="checkbox" name="checkbox[1]" class="parent" data-name="chck-1" />
    </td>
    <td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="checkbox[2]" class="child" data-name="chck-1" />
    </td>
    <td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="checkbox[3]" class="child" data-name="chck-1" />
    </td>
    <td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="checkbox[4]" class="parent" data-name="chck-2" />
    </td>
    <td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="checkbox[5]" class="child parent" data-name="chck-2" data-parent="chck-3" />
    </td>
    <td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="checkbox[6]" class="child" data-name="chck-3" />
    </td>
    <td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="checkbox[7]" class="child" data-name="chck-3" />
    </td>
    <td>
  </tr>
</table>

Answer 3

Try below script,

$(document).on('change', 'input[type=checkbox]', function(e) {
  $(this).siblings('ul').find("input[type='checkbox']").prop('checked', this.checked);
  $(this).parentsUntil('input[type=checkbox]').children("input[type='checkbox']").prop('checked', this.checked);
  e.stopPropagation();
});