JQuery UI object button bar that works like radio buttons

Question

I'd like to make a control or use a control in jQuery that acts like a series of radio buttons but that looks like solid buttons instead of the radio circle. They'd look like a horizontal menu but only one could be selected at one time.

Answer 1

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

The markup looks like this (straight from the demo), just use a container like a <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();