How can I simulate a click on a jQuery UI radio button?

Question

I have some radio buttons

<div id="typeRadios">
    <input id="character_chartype_a" name="character[chartype]" type="radio" value="A" /><label for="character_chartype_a">A</label>
    <input id="character_chartype_a" name="character[chartype]" type="radio" value="B" /><label for="character_chartype_b">B</label>
</div>

that I turn into jQuery UI buttons

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

What line of code can I use to simulate a click on one of the buttons? I've tried this

// here data.chartype equals "A"
$("input[value='"+data.chartype+"']").click();

but it doesn't work. Thanks for reading.

Yi Jiang · Accepted Answer · 2010-08-29 03:22:27Z

6

You have to do it with the label element added by jQuery UI. Try:

$("label[for='character_chartype_"+data.chartype+"']").click();

Have a look at it here, in a controlled environment: http://jsfiddle.net/B3d4z/

edited Aug 29, 2010 at 3:22

answered Aug 29, 2010 at 2:24

Yi Jiang

50.2k16 gold badges139 silver badges137 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yi Jiang Over a year ago

@ben: I think I know the problem... updating my soltion now. The label 's for attribute matches the input 's id , not value

jedierikb Over a year ago

but... it does not fire an event when you simulate the click. jsfiddle.net/XrCNj Ideas on how to fire the event?

Jacob Relkin · Accepted Answer · 2010-08-29 02:24:01Z

1

I believe you're looking for the select event.

$("input[value='"+data.chartype+"']").select();

answered Aug 29, 2010 at 2:24

Jacob Relkin

163k34 gold badges351 silver badges321 bronze badges

1 Comment

Yi Jiang Over a year ago

I believe that would work if it was just input elements, but with jQuery UI the input is hidden and the button recreated from a new label and a span , thus this won't work. I've tested it ;)

The Demz · Accepted Answer · 2011-11-08 22:58:44Z

0

<div class="radioVote">
<input type="radio" id="radio1" name="radio" value="1"/><label for="radio1">ONE</label>
<input type="radio" id="radio2" name="radio" value="2"/><label for="radio2">TWO</label>
</div> 



$(document).ready(function(){

        $( ".radioVote" ).buttonset();

        $('[for^=radio]').click(function() {
            var theRadioElement = $(this).prev();
            alert("Button" + theRadioElement.attr('id') + " clicked. VALUE:" + theRadioElement.val());
        });

    });

This example shows how to get the ID and Value when you click on a label that belongs to a jQueryUI radio.

Happy coding :)

answered Nov 8, 2011 at 22:58

The Demz

7,3926 gold badges43 silver badges43 bronze badges

Collectives™ on Stack Overflow

How can I simulate a click on a jQuery UI radio button?

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related