How to Add Checkbox in HTML Table ?

Last Updated : 07 Mar, 2024

Adding checkboxes to an HTML table can be useful for various purposes, such as selecting multiple rows for batch processing or toggling the state of individual items. In this article, we will explore two methods to add checkboxes to an HTML table i.e. using basic HTML and JavaScript for dynamic interaction.

Add Checkbox in HTML Table

In this method, we will add checkboxes to each row of the table using plain HTML.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Table with Checkboxes</title>
    <style>
        table {
            margin: auto;
        }
    </style>
</head>

<body>
    <table border="1">
        <tr>
            <th>Select</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
        <tr>
            <td><input type="checkbox" name="select"></td>
            <td>XYZ</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="select"></td>
            <td>ABC</td>
            <td>[email protected]</td>
        </tr>
    </table>
</body>

</html>

Output:

table-checkbox

Explanation

We add a new column with the heading "Select" to accommodate the checkboxes.
Inside each row, under the "Select" column, we insert an <input> element with the type attribute set to "checkbox".
The name attribute is set to "select" for all checkboxes, but you can use different names if needed for form submission or JavaScript manipulation.

Add Checkbox in HTML Table using JavaScript for Dynamic Selection

In this method, we'll add a "Select All" checkbox to select or deselect all checkboxes in the table dynamically using JavaScript.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Dynamic Table with Checkboxes</title>

    <style>
        table {
            margin: auto;
        }
    </style>

    <script>
        function toggle(source) {
            let checkboxes = document
                .querySelectorAll('input[type="checkbox"]');
            for (let i = 0; i < checkboxes.length; i++) {
                if (checkboxes[i] != source)
                    checkboxes[i].checked = source.checked;
            }
        }
    </script>
</head>

<body>
    <table border="1">
        <tr>
            <th><input type="checkbox" onclick="toggle(this);"></th>
            <th>Name</th>
            <th>Email</th>
        </tr>
        <tr>
            <td><input type="checkbox" name="select"></td>
            <td>XYZ</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="select"></td>
            <td>ABC</td>
            <td>[email protected]</td>
        </tr>
    </table>
</body>

</html>

Output:

table-checkbox-2