WizTools.org RESTClient 2.1 Released, Lauds Yours Truly | Home | String Concatenation vs. StringBuilder

Filed under on March 14, 2008 by Chris Dary

Emphasize Selected Radio Options with jQuery

I've always felt like selected radio options didn't really have enough weight by default. A mere filled in circle seems to be a throwback to our paper based origins, and reminds me of the days of standardized testing.

To give your radio buttons a little extra oomph, I like this little jQuery script that emboldens the currently selected label.

$("div.radioOptions :input").click(function() {
   /**
    * Remove the selectedLabel class from all radio buttons
    * with the same name as the clicked radio button.
    */
    $("input[@name='" + this.name + "']").parent('label').removeClass('selectedLabel');

    /* Now, add the selectedLabel class to the clicked radio button's label */
    $(this).parent('label').addClass('selectedLabel');
});

A demo of what this little script (along with one line of css: .selectedLabel { font-weight: bold; }) accomplishes:

 

Post a Comment Digg Del.icio.us

Comments

Post a Comment:

Name:

Email Address:

URL:

Comment:

WizTools.org RESTClient 2.1 Released, Lauds Yours Truly | Main | String Concatenation vs. StringBuilder