HTML tables are a very handy and useful element. They can adapt to any style or design using CSS and can also hold different input type controls like an input box, Checkbox and radio button. This post focuses on having a checkbox in every row of the HTML table, allowing users to select/unselect table rows. So in this quick post, we’ll look at how to check/uncheck all checkboxes in an HTML table using jQuery.
Here is the complete jQuery code:
You can see the demo here!
HTML Markup
To get started, create a standard HTML table on the page. For this demo, our table has 4 columns: checkbox in the first column, then Name, Age, and Country, along with some random data. The checkbox is present in the table header as well as in every table row. When the header checkbox is checked, all the checkboxes in the table rows are also checked and vice versa. Here, only the header row checkbox has an ID attribute.| Name | Age | Country | |
|---|---|---|---|
| Maria Anders | 30 | Germany | |
| Francisco Chang | 24 | Mexico | |
| Roland Mendel | 100 | Austria | |
| Helen Bennett | 28 | UK | |
| Yoshi Tannamuri | 35 | Canada | |
| Giovanni Rovelli | 46 | Italy | |
| Alex Smith | 59 | USA |
CSS
The following CSS classes are used to style the table and its rows. There are also styles defined to provide alternate colors to the table rows.
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
th {
background-color: #ccd;
}
tr:nth-child(even) {
background-color: #dddddd;
}
tr:nth-child(odd) {
background-color: #ddeedd;
}
jQuery Code
To implement this functionality, we need to attach a click event to the header checkbox and all the table row checkboxes as well. The solution also takes care of updating the header checkbox status based on the status of the table row checkboxes. The following is the outline of the jQuery solution:- First, attach a click event to the header checkbox. In the event, based on its status, check/uncheck HTML table row checkboxes.
- Attach a click event handler to all HTML table row checkboxes. In the event, check the clicked checkbox status and header checkbox status. We’ll also need to update the header row checkbox status based on table row checkbox status. If the clicked checkbox status is false and the header checkbox status is true, then uncheck the header checkbox. When the clicked checkbox status is checked, loop through all the other checkboxes to find out if all are checked or not. If all are checked, then also check the header checkbox.
Here is the complete jQuery code:
$(document).ready(function() {
$('#chkParent').click(function() {
var isChecked = $(this).prop("checked");
$('#tblData tr:has(td)').find('input[type="checkbox"]').prop('checked', isChecked);
});
$('#tblData tr:has(td)').find('input[type="checkbox"]').click(function() {
var isChecked = $(this).prop("checked");
var isHeaderChecked = $("#chkParent").prop("checked");
if (isChecked == false && isHeaderChecked)
$("#chkParent").prop('checked', isChecked);
else {
$('#tblData tr:has(td)').find('input[type="checkbox"]').each(function() {
if ($(this).prop("checked") == false)
isChecked = false;
});
$("#chkParent").prop('checked', isChecked);
}
});
You can see the demo here!
