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:

Simple? You bet! That’s why we call it a quick tip.