The jQuery UI object's button bar that acts as radio buttons

Question

I would like to make a control or use a control in jQuery that acts like a series of radio buttons, but it looks like solid buttons, not a circle of radio. They look like a horizontal menu, but only one can be selected at a time.

Answer 1

jQuery UI added a widget for this in 1.8, check out jQuery UI Buttons .

The markup looks like this (right from the demo), just use a container like <div> :

 <div id="radio"> <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label> <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label> <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label> </div> 

Then call .buttonset() :

 $("#radio").buttonset();