Check and Uncheck Parent/Child Checkboxes using Jquery-CodePudding

I have to use group of checkboxes in my project.

This is how my HTML look like:

<table id="myTable">
<tr>
  <td>
    <label>
      <input type="checkbox"  name="mod[6]" value="1">
    </label>
  </td>
  <td><span>Parent Module</span></td>
  <td>
    <label>
      <input type="checkbox" name="mod[7]" value="1"> Sub Module
    </label>
    <label>
      <input type="checkbox" name="mod[8]" value="1"> Sub Module
    </label>
    <label>
      <input type="checkbox" name="mod[9]" value="1"> Sub Module
    </label>
  </td>
</tr>
<tr>.....</tr>
<tr>.....</tr>
</table>

Using this checkboxes, users can select their preferred parent and sub module selection. When making that selection, it should work as follows.

When a parent is checked, all children are checked under it. (Parents and children are separated by a row on the table)
When a parent is unchecked, all children are unchecked under it.
At the very least, When one child is checked, its parent should be checked.
When no child is checked, its parents should not be checked.

I have done this work to some extent. But I look forward to your help in completing this.

This is how I tried it using Jquery.

$('#myTable').on( "change", "label > input[type=checkbox]", function(e) {
  var checkboxes = $(this).closest('tr').find("input[type=checkbox]");
  if ($(this).hasClass("parent")) { 
    if ($(this).prop("checked")) {
      checkboxes.prop("checked", true);
    }
  }
});

CodePudding user response：

Assigned .child class to the subordinate checkboxes just to make it a little easier to follow hopefully. Details are commented in the example.

// Bind all checkboxes to the change event
$(':checkbox').on('change', checkUncheck);

function checkUncheck(e) {
  // The tag the user checked/unchecked
  const $this = $(this);
  // Reference to the closest <tr>
  const $row = $this.closest('tr');
  
  /*
  If the user clicked a .parent...
  ...and if it is checked...
  ... .find() all the <td> of $row...
  ...and check them all...
  ...otherwise uncheck them all
  */
  if ($this.is('.parent')) {
    if ($this.is(':checked')) {
      $row.find('.child').prop('checked', true);
    } else {
      $row.find('.child').prop('checked', false);
    }
  }
  /*
  If the user checked/unchecked a .child...
  ... .makeArray() of all of $row .child and...
  ... find .some() checked .child...
  ... and if there is at least one .child:checked...
  ... then check .parent...
  ... otherwise uncheck .parent
  */
  if ($this.is('.child')) {
    let someChecked = jQuery.makeArray($row.find('.child')).some(cb => cb.checked);
    if (someChecked) {
      $row.find('.parent').prop('checked', true);
    } else {
      $row.find('.parent').prop('checked', false);
    }
  }
}

<table>
<tr>
  <td>
    <label>
      <input  type="checkbox" name="mod[6]" value="1">
    </label>
  </td>
  <td><span>Parent Module</span></td>
  <td>
    <label>
      <input class='child' type="checkbox" name="mod[7]" value="1"> Sub Module
    </label>
    <label>
      <input class='child' type="checkbox" name="mod[8]" value="1"> Sub Module
    </label>
    <label>
      <input class='child' type="checkbox" name="mod[9]" value="1"> Sub Module
    </label>
  </td>
</tr>
<tr>.....</tr>
<tr>.....</tr>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

CodePudding user response：

here is a working demo. you need to update the code with else condition where you uncheck parents' checkbox on uncheck child.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $('#myTable').on( "change", "label > input[type=checkbox]", function(e) {
  var checkboxes = $(this).closest('tr').find("input[type=checkbox]");
  if ($(this).hasClass("parent")) { 
    if ($(this).prop("checked")) {
      checkboxes.prop("checked", true);
    }else
    {
     checkboxes.prop("checked", false);
    }
  }else if($(this).hasClass("child")){
   if ($(this).prop("checked")) {
       $(".parent").prop("checked",true)
    }else
    {
     $(".parent").prop("checked",false)
    }
  } 
});
});
</script>
</head>
<body>

<table id="myTable">
<tr>
  <td>
    <label>
      <input type="checkbox"  name="mod[6]" value="1">
    </label>
  </td>
  <td><span>Parent Module</span></td>
  <td>
    <label>
      <input  type="checkbox" name="mod[7]" value="1"> Sub Module
    </label>
    <label>
      <input  type="checkbox" name="mod[8]" value="1"> Sub Module
    </label>
    <label>
      <input  type="checkbox" name="mod[9]" value="1"> Sub Module
    </label>
  </td>
</tr>
<tr>.....</tr>
<tr>.....</tr>
</table>
</body>
</html>