Joe Sergeant

• Hello
• Thoughts
• Self
• Contact

November 23, 2009

Radio button selection using parent element and jQuery

Here was the request; I had a list of selectable items, each of which needed a different icon associated with them. Due to the limitations of the <asp:RadioButtonList> I was forced achieve this by setting RepeatLayout=”Table” and placing a background image on the table to simulate the icons. Spacing was achieved by giving each table cell a fixed width and adding top padding, allowing the icon to be shown.

That worked well until it was pointed out that, from a usability point of view, it would be far better to let the user click on the icon to select the relevant radio button, as well as the radio button label. At first I thought this would be a pain to implement but, as usual, jQuery shone through.

After one line of jQuery, the user could now click anywhere on a table cell and the child radio button would be selected.

$("td").click(function() {
     $(this).find("input").attr("checked", "checked");
});