Learning 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 & amp; & amp; 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.