So since I’ve been playing with jQuery on my spare time while putting together an ajax site, I’ve decided to tackle a design issue I’ve run into many times at work with jQuery. This idea originally comes from phpMyAdmin. If you’ve used that software, you know that when you click on any table row, it automatically toggles the checked state of the checkbox in the first cell. I think that’s an extremely user friendly thing to have since checkboxes are so small and hard to click on.

Let me present you my friends, my first jQuery plugin. It generically adds the toggle function to any table rows you specify based on the css class names. It will by default toggle any checkboxes within the table row. However, you can manually exclude checkboxes based on name, id or css classes in the script. In addition to the phpMyAdmin function, I added an initialization step in the script that correctly marks a row when it’s considered checked on page load.

tableRowCheckboxToggle

  • It generically adds the toggle checkbox function to any table rows you specify based on the css class names.
  • It will by default toggle any checkboxes within the table row.
  • You can manually exclude checkboxes based on name, id or css classes in the script.
  • If there is any applicable checkboxes inside of the table row that are checked, it will apply a class to the table row.
  • It also marks table rows when there are checked applicable checkboxes on page load.

Download version 1.0

Live demonstration

jQuery plugin tableRowCheckboxToggle