How to Add Checkbox in HTML Table ? Last Updated : 07 Mar, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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 TableIn 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: ExplanationWe 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 SelectionIn 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: ExplanationWe add a "Select All" checkbox in the header row of the table by inserting an <input> element with the type attribute set to "checkbox" in the first <th> element.We define a JavaScript function toggle(source) that takes the "Select All" checkbox as the source parameter. This function iterates over all checkboxes in the table and sets their checked property to match the checked property of the source checkbox.The onclick attribute of the "Select All" checkbox is set to call the toggle(this); function, passing the checkbox itself as the argument. Comment More infoAdvertise with us Next Article How to add a checkbox in forms using HTML ? V vkash8574 Follow Improve Article Tags : HTML HTML-Questions Similar Reads How to add table footer in HTML ? To add a table footer on an HTML table you can use the HTML tfoot tag. The footer is required when the developer wants to show the conclusion or the result of the table data in a single row. Syntax: <tfoot> // Table footer contents... </tfoot> Below example will illustrate the concept of 1 min read How to Create a Checkbox in HTML? The checkbox is the HTML form element that lets users select one or more options from predefined choices. It can often be used when a user selects multiple items in the list. Checkboxes can be checked or unchecked, and they are created using the <input> tag with the type attributes set to the 3 min read How to Create Table in HTML? HTML tables are used for organizing and displaying data in a structured format on web pages. Tables are commonly used for product information, presenting data analytics, or designing a pricing comparison chart. Elements of HTML TableTable ElementsDescription<table>The <table> element def 3 min read How to Set Checkboxes Readonly in HTML ? In this article, we will learn whether it is possible to make checkboxes readonly in HTML or not. Checkboxes are commonly used to allow users to select multiple options from a set of choices. They are represented in HTML by the <input> tag with the type="checkbox" attribute. It is not possible 4 min read How to add a checkbox in forms using HTML ? In this article, we will learn how to add a checkbox in HTML Forms. Basically, the checkbox is used to select one or more options from a variety of options. It is a multi-control unit that will be presented as a small square box on the screen. Normally, Checkbox has 3 states namely- Checked, uncheck 1 min read How to merge table cells in HTML ? The purpose of this article is to explore the method of merging table cells in HTML using the rowspan and colspan attributes. By utilizing rowspan, multiple cells in a row can be merged or combined, while colspan enables the merging of cells in a column within an HTML table. This technique proves es 2 min read Like