CODEWITHSUNDEEP
jquery-uijquery-ui-button
JsCoder
JsCoder

Reputation: 1733

Handling radio buttons groups select event with JQuery UI

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.

Upvotes: 7

Views: 15739

Answers (1)

Andrew Whitaker
Andrew Whitaker

Reputation: 126042

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/

Upvotes: 13

Related Questions