Parent Checkbox to Select All Child Checkboxes using jQuery
This tutorial demonstrates how to implement a parent checkbox functionality using jQuery, allowing users to select or deselect all child checkboxes associated with it. This can be useful in scenarios where you have a group of checkboxes and want to provide a convenient way to control their selection status.
HTML Structure
The HTML structure of the example code consists of a container div that holds multiple parentBox sections. Each parentBox represents a group of checkboxes, with a parent checkbox and a set of child checkboxes inside.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Parent checkbox to select all child checkbox (jQuery)</h1>
<div class="parentBox">
<div class="form-check">
<label class="form-check-label" style="font-weight: bold;margin-bottom: 3px;">
<input class="parentInput" type="checkbox">
Stock-management
</label>
</div>
<div class="row mb-2">
<div class="col-md-4">
<div class="form-check">
<label class="form-check-label">
<input class="childInput" checked="checked" type="checkbox" value="admin.stock-management.edit">
Stock Management edit
</label>
</div>
</div>
<div class="col-md-4">
<div class="form-check">
<label class="form-check-label">
<input class="childInput" checked="checked" type="checkbox" value="admin.stock-management.destroy">
Stock Management delete
</label>
</div>
</div>
<div class="col-md-4">
<div class="form-check">
<label class="form-check-label">
<input class="childInput" checked="checked" type="checkbox" value="admin.stock-management.show">
Stock Management show
</label>
</div>
</div>
<div class="col-md-4">
<div class="form-check">
<label class="form-check-label">
<input class="childInput" checked="checked" type="checkbox" value="admin.stock-management.create">
Stock Management create
</label>
</div>
</div>
<div class="col-md-4">
<div class="form-check">
<label class="form-check-label">
<input class="childInput" checked="checked" type="checkbox" value="admin.stock-management.store">
Stock Management store
</label>
</div>
</div>
<div class="col-md-4">
<div class="form-check">
<label class="form-check-label">
<input class="childInput" checked="checked" type="checkbox" value="admin.stock-management.index">
Stock Management index
</label>
</div>
</div>
</div>
</div>
<div class="parentBox">
<div class="form-check">
<label class="form-check-label" style="font-weight: bold;margin-bottom: 3px;">
<input class="parentInput" type="checkbox">
Inward
</label>
</div>
<div class="row mb-2">
<div class="col-md-4">
<div class="form-check">
<label class="form-check-label">
<input class="childInput" type="checkbox" value="admin.inward.destroy">
Ledger Entry delete
</label>
</div>
</div>
<div class="col-md-4">
<div class="form-check">
<label class="form-check-label">
<input class="childInput" checked="checked" type="checkbox" value="admin.inward.update">
Ledger update
</label>
</div>
</div>
<div class="col-md-4">
<div class="form-check">
<label class="form-check-label">
<input class="childInput" type="checkbox" value="admin.inward.edit">
Ledger edit
</label>
</div>
</div>
<div class="col-md-4">
<div class="form-check">
<label class="form-check-label">
<input class="childInput" checked="checked" type="checkbox" value="admin.inward.show">
Ledger show
</label>
</div>
</div>
<div class="col-md-4">
<div class="form-check">
<label class="form-check-label">
<input class="childInput" checked="checked" type="checkbox" value="admin.inward.store">
Ledger store
</label>
</div>
</div>
<div class="col-md-4">
<div class="form-check">
<label class="form-check-label">
<input class="childInput" checked="checked" type="checkbox" value="admin.inward.create">
Ledger create
</label>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
// Click event for parent checkboxes
$('.parentInput').click(function() {
var parentBox = $(this).closest('.parentBox').find("input[type=checkbox]");
parentBox.prop("checked", $(this).prop("checked"));
});
// Click event for child checkboxes
$('.childInput').click(function() {
childInputChecked($(this));
});
// Initial checkbox state check
$(".permissionsCh").each(function(index) {
childInputChecked($(this).closest('.parentBox').find(".childInput:first-child"));
});
function childInputChecked(ch) {
var chBox = ch.closest('.parentBox');
if (chBox.find(".childInput:checked").length == chBox.find(".childInput").length) {
ch.closest('.parentBox').find('.parentInput').prop('checked', true);
} else {
ch.closest('.parentBox').find('.parentInput').prop('checked', false);
}
}
</script>
</body>
</html>Example:
Here, we have the body section of the HTML. The structure includes a container with multiple parentBox sections. Each parentBox consists of a parent checkbox and a set of child checkboxes. The parent checkbox is represented by the class .parentInput, and the child checkboxes are represented by the class .childInput.
In the JavaScript section, we have the following code:
The $('.parentInput').click() function sets up a click event handler for all elements with the class .parentInput. When a parent checkbox is clicked, it finds all the associated child checkboxes within the closest .parentBox and sets their checked property based on the parent checkbox's checked status.
The $('.childInput').click() function sets up a click event handler for all elements with the class .childInput. When a child checkbox is clicked, it calls the childInputChecked() function and passes the clicked checkbox as an argument.
The $(".permissionsCh").each() function iterates over each element with the class .permissionsCh. However, it seems there are no elements with this class in the provided code.
The childInputChecked() function checks if all child checkboxes within a parentBox are checked or not. It updates the parent checkbox (parentInput) accordingly.
Leave A Comment