Search jQuery

jQuery Forum

How do I check a radio button from JavaScript?

in jQuery Mobile • 2 years ago

I Have a horizontal radio button set and I want to change the selected (checked) item from code having loaded some data via Ajax.

The html is:

<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Minutes:</legend>
<input type="radio" name="r1" id="Radio1" value="0" checked="checked" />
<label for="Radio1">0</label>
<input type="radio" name="r1" id="Radio2" value="15" />
<label for="Radio2">15</label>
<input type="radio" name="r1" id="Radio3" value="30" />
<label for="Radio3">30</label>
<input type="radio" name="r1" id="Radio4" value="45" />
<label for="Radio4">45</label>
</fieldset>
</div>

I have tried the obvious setting the underlying radio button attribute to checked something like

$('#Radio4').attr('checked', true);

and I have tried triggering a click event on the button with

$('#Radio4').click();

I suspect i need the equivalent of a click on the <span> that jQM puts on top of the radio button element but i can't see how to do that. Any ideas?

Replies(5)

rsaccon

Re: How do I check a radio button from JavaScript?

2 years ago

try something like this:

yourRadioContainer.find("input[name='r1']:checked").val();

tzadvanta..

Re: How do I check a radio button from JavaScript?

2 years ago

The radiobutton itself is updated only you not see it visually as the radiobutton is wrapped with JQM styling.

For that to you need to refresh it like:

$('#Radio4')

.attr('checked',true)

.checkboxradio("refresh");

Other form controls are enhanced in JQM by this part in the framework. Use that as a guide to update the UI for other controls.

JQM 1.0a2.js snippet

// enchance form controls

this.element

.find( "[type='radio'], [type='checkbox']" )

.checkboxradio();

this.element

.find( "button, [type='button'], [type='submit'], [type='reset'], [type='image']" )

.not( ".ui-nojs" )

.button();

this.element

.find( "input, textarea" )

.not( "[type='radio'], [type='checkbox'], button, [type='button'], [type='submit'], [type='reset'], [type='image']" )

.textinput();

this.element

.find( "input, select" )

.filter( "[data-role='slider'], [data-type='range']" )

.slider();

this.element

.find( "select:not([data-role='slider'])" )

.selectmenu();

aditmikeg

Re: How do I check a radio button from JavaScript?

2 years ago

Just to be clear for anyone refering to this issue - if you set a radio button from code then you need to call the "refresh" method of checkboxradio(.checkboxradio("refresh");) for each of the radio buttons in the group.

Thanks for the reply though - spot on.

Belkad

Re: How do I check a radio button from JavaScript?

9 months ago

You can try $("#radioLabel1").trigger("click");
where radioLabel1 is the id of the radio's label.

bdk0172

Re: How do I check a radio button from JavaScript?

7 months ago

THANK YOU Belkad! I had tried all manner of setting checked attribute and doing refreshes and none of them worked. Yours worked like a charm and also takes the least bit of code.

Top Reply

Response title

Attachments

jQuery Forum

How do I check a radio button from JavaScript?

Replies(5)

Re: How do I check a radio button from JavaScript?

Re: How do I check a radio button from JavaScript?

Re: How do I check a radio button from JavaScript?

Re: How do I check a radio button from JavaScript?

Re: How do I check a radio button from JavaScript?

Statistics

Tags

Actions

Related Posts