Example 10: Working radios with jQuery

Back to Row Locking with CSS and JavaScript

Hover over a row to highlight it. Click on a row for additional highlighting and to check/uncheck it's corresponding radio button

The table must have a class of "pickme" for the javascript to target it.

This is based on the Dec 2006 article Row Locking with CSS and JavaScript. This is an update made on Oct 22, 2008 using jQuery exclusively for the JS.

Table

  Category Movie Gross
Domestic Titanic $600,788,188
Adjusted for Inflation Gone with the Wind $1,329,453,600
Worldwide Titanic $1,845,034,000
R-Rating The Passion of the Christ $370,274,604
PG-13 Rating Titanic $600,788,188
PG-Rating Star Wars $460,998,007
G-Rating Finding Nemo $339,714,978
NC-17 Rating Showgirls $20,350,754
Movies that never hit #1 My Big Fat Greek Wedding 241,438,208
IMAX Everest $87,178,599

For sake of demonstration, and to make it easy for you to view source for everything, both CSS and JavaScript are in the head of this document. In real-world implementation, it is best practice to use external files for each when possible.