Handling radio buttons groups select event with JQuery UI

Question

why JQuery UI option buttons (buttonset) doesn't have any events - I want to handle select events for it, wonder what's the right way for doing that.

Answer 1

You should just tap into the normal change event for the radio buttons themselves. Expanding on the example on jQueryUI's website:

Html:

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

JavaScript:

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

$("input[name='radio']").on("change", function () {
    alert(this.value);
});

The buttonset widget is just styling the radio buttons a certain way. All of the regular events will fire as expected.

Example: http://jsfiddle.net/andrewwhitaker/LcJGd/