X

LATEST #JQUERY NEWS

Check all checkboxes in HTML table using jQuery


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.

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.

<table id=”tblData”>

<tr>

<th>

<input type=”checkbox” id=”chkParent” />

</th>

<th>Name</th>

<th>Age</th>

<th>Country</th>

</tr>

<tr>

<td>

<input type=”checkbox” />

</td>

<td>Maria Anders</td>

<td>30</td>

<td>Germany</td>

</tr>

<tr>

<td>

<input type=”checkbox” />

</td>

<td>Francisco Chang</td>

<td>24</td>

<td>Mexico</td>

</tr>

<tr>

<td>

<input type=”checkbox” />

</td>

<td>Roland Mendel</td>

<td>100</td>

<td>Austria</td>

</tr>

<tr>

<td>

<input type=”checkbox” />

</td>

<td>Helen Bennett</td>

<td>28</td>

<td>UK</td>

</tr>

<tr>

<td>

<input type=”checkbox” />

</td>

<td>Yoshi Tannamuri</td>

<td>35</td>

<td>Canada</td>

</tr>

<tr>

<td>

<input type=”checkbox” />

</td>

<td>Giovanni Rovelli</td>

<td>46</td>

<td>Italy</td>

</tr>

<tr>

<td>

<input type=”checkbox” />

</td>

<td>Alex Smith</td>

<td>59</td>

<td>USA</td>

</tr>

</table>

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 at the following link!

Conclusion

To sum it up, we’ve just learned how to implement check/uncheck checkbox functionality to select HTML table rows based on the header row checkbox status. This solution also updates the header checkbox status based on the status of all the table row’s checkboxes. Based on your needs, you can easily modify this section to take further action on the cell value.

 

Recently Published

article image
»

Check all checkboxes in HTML table using jQuery

HTML tables are a very handy and useful element. They can adapt to ...

article image
»

Changing images in a loop on hover using jQuery

Why use this Function? Changing images in a loop on mouse over is a ...

article image
»

How to Dynamically Trim Text Using jQuery

This easy beginners jQuery tutorial demonstrates how you can use ...

article image
»

jQuery Snippets: Getting the Current Year

Here’s a fun, simple, and incredibly useful jQuery that you can ...

article image
»

jQuery Snippets: How to Conditionally Enable Submit

One easy way to prevent users from submitting an empty form in a ...

article image
»

How to Use Google Analytics with jQuery Mobile

jQuery Mobile is an HTML5 based web-page framework that’s ...

article image
»

jQuery Snippets: Using jQuery to Check All Boxes

When you’ve given your users a ton of checkbox input fields ...

article image
»

Useful jQuery Code Snippets for Working with Images

Images are an essential part of any website and sometimes working ...

article image
»

How to Use jQuery to Check if Cookies are Enabled

A cookie (not the kind with chocolate chips) is a small piece of data ...