Search code examples
jquery-uijquery-ui-button

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.


Solution

  • 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/