jQuery | Multiple Checkbox Check/ Uncheck on Table Tutorial

In general application with tabular data, may have selected using a checkbox on each row. In that case, there should be a master checkbox to check/uncheck all table rows.

Here we will discuss an example table that will have a master checkbox on the header and each table row with its own checkbox.

A user can check/uncheck all rows using a single master checkbox on the header.

Add following HTML template with a table having a header with master checkbox and body with rows each with a checkbox

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Checkbox Multiple Check/ Uncheck</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

    <script>
        $(function () {

            // Header Master Checkbox Event
            $("#masterCheck").on("click", function () {
                if ($("input:checkbox").prop("checked")) {
                    $("input:checkbox[name='row-check']").prop("checked", true);
                } else {
                    $("input:checkbox[name='row-check']").prop("checked", false);
                }
            });

            // Check event on each table row checkbox
            $("input:checkbox[name='row-check']").on("change", function () {
                var total_check_boxes = $("input:checkbox[name='row-check']").length;
                var total_checked_boxes = $("input:checkbox[name='row-check']:checked").length;

                // If all checked manually then check master checkbox
                if (total_check_boxes === total_checked_boxes) {
                    $("#masterCheck").prop("checked", true);
                }
                else {
                    $("#masterCheck").prop("checked", false);
                }
            });
        });
    </script>
</head>

<body class="container">

    <h4>Multiple Check/ Uncheck</h4>

    <table class="table">
        <thead>
            <tr>
                <th scope="col">
                    <input class="form-check-input" type="checkbox" id="masterCheck" value="checkUncheckAll">
                    <label class="form-check-label" for="masterCheck">Select/ Deselect All</label>
                </th>
                <th scope="col">Address</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input class="form-check-input" type="checkbox" id="row1" name="row-check" value="Lavina Cassin">
                    <label class="form-check-label" for="row1">Lavina Cassin</label>
                </td>
                <td>1659 Melyssa Cove</td>
            </tr>
            <tr>
                <td>
                    <input class="form-check-input" type="checkbox" id="row2" name="row-check"
                        value="Herminio Schimmel">
                    <label class="form-check-label" for="row2">Herminio Schimmel</label>
                </td>
                <td>9562 Fleta Dam</td>
            </tr>
            <tr>
                <td>
                    <input class="form-check-input" type="checkbox" id="row3" name="row-check" value="Anika Little">
                    <label class="form-check-label" for="row3">Anika Little</label>
                </td>
                <td>49964 Halvorson Hollow</td>
            </tr>
        </tbody>
    </table>


</body>

</html>

Category: jQuery

jQuery | Multiple Checkbox Check/ Uncheck on Table Tutorial

Leave a Reply Cancel reply