jQuery plugin – tableRowCheckboxToggle

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

About these ads

13 thoughts on “jQuery plugin – tableRowCheckboxToggle

  1. [Comment ID #233651 Will Be Quoted Here]

    Yay I think the smilies stopped working after I upgraded. I must have overwritten a file or something. Need to figure out. I wish the setting is in the database so I don’t have to worry about overwriting it. Any tips?

  2. Do you think with some tinkering this could also work within a tree menu with checkboxes associated with parent and child nodes? I’m working on something where the menu items would change the background color after they have been unchecked signifying they have been deactivated.

  3. [Comment ID #237094 Will Be Quoted Here]

    it’s meant to be used by table rows. if you want it to work with your menu, learn jQuery and write it from scratch is probably easier than tweaking the plugin.

  4. Anyone? I tried resetting the function on a sorted callback but it didn’t reset the previous stored indexes… Nice piece of code by the way.

  5. [Comment ID #259471 Will Be Quoted Here]

    Jesse, I don’t know which sorting plugin you are using for the tables. I don’t really have time to either. I’d recommend you try the jQuery mailing list. It’s pretty active.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s