How to Toggle Checkboxes in a HTML Table with jQuery

This blog post presents a simple program that allows you to toggle checkboxes in a HTML table using jQuery. By selecting a table row, the corresponding checkbox will be toggled on or off instantly. This program can be useful in situations where you want to provide a more user-friendly way of selecting multiple items in a table.

Code

<tr class="checkable">

<script>
    $(document).on('click', 'tr.checkable', function () {
        var checkbox = $(this).closest('tr').find("input[type=checkbox]");

        checkbox.prop('checked', !checkbox.is(':checked'));
    });
</script>

Code Explanation

The provided code snippet demonstrates how to achieve the desired functionality. Let’s break it down step by step:

1. The element has a class attribute set to “checkable”, which is used to identify the rows that can be clicked to toggle checkboxes.

2. Next, a jQuery click event listener is attached to the document, targeting the elements with the “checkable” class. This ensures that the event is triggered when any row with the “checkable” class is clicked.

3. Inside the event handler function, a variable named “checkbox” is declared and assigned the value of the closest checkbox element on the clicked row. This is achieved by traversing up the DOM tree from the clicked row using the closest() method, and finding the first child that matches the specified selector (“input[type=checkbox]”).

4. The prop() method is used to toggle the checked property of the checkbox. By passing the expression “!checkbox.is(‘:checked’)”, we can invert the current checked state of the checkbox.

That’s it! With just a few lines of code, you now have a fully functional toggle feature for the checkboxes in your HTML table.

Example Usage:

To understand how this program works, let’s consider a scenario where you have a table with multiple rows, each containing a checkbox. By adding the “checkable” class to the desired rows, you enable the toggle functionality.

html
<table>
  <thead>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr class="checkable">
      <td><input type="checkbox"></td>
      <td>John Doe</td>
      <td>johndoe@example.com</td>
    </tr>
    <tr class="checkable">
      <td><input type="checkbox"></td>
      <td>Jane Smith</td>
      <td>janesmith@example.com</td>
    </tr>
    <!-- Additional rows with checkboxes -->
  </tbody>
</table>

By clicking on any of the rows with the “checkable” class, the corresponding checkbox will be toggled on or off. This allows the user to easily select or deselect multiple items in the table.

In conclusion, by implementing the provided code snippet, you can enhance the user experience on your website by enabling the convenient toggle functionality for checkboxes in a HTML table. This program is straightforward to implement and can be a valuable addition to any project that involves tables with selectable items.

Also checkout the following codes.

“How to Implement a Simple Payment System using Axios in JavaScript”
How to Send a Payment and Receive Success Message Using Axios in JavaScript