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" class="parent" 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);
}
}
});