jQuery set radio button
JqueryRadio ButtonJquery Problem Overview
I am trying to set a radio button. I want set it by using the value or the id.
This is what I've tried.
$('input:radio[name=cols]'+" #"+newcol).attr('checked',true);
newcol
is the id of the radio button.
Maybe a little edit is in order.
There are two sets of radio boxes one with cols and the other with rows. So I see the point in not using id's. My bad. So I have as an example:
<input type="radio" name="rows" class="listOfCols"
style="width: 50%; " value="Site"></input>
and
<input type="radio" name="cols" class="listOfCols"
style="width: 50%; " value="Site"></input>
with the id's removed, and I need to set the correct one.
Jquery Solutions
Solution 1 - Jquery
Your selector looks for the descendant of a input:radio[name=cols]
element that has the id of newcol
(well the value of that variable).
Try this instead (since you're selecting by ID anyway):
$('#' + newcol).prop('checked',true);
Here is a demo: http://jsfiddle.net/jasper/n8CdM/1/
Also, as of jQuery 1.6 the perferred method of altering a property is .prop()
: http://api.jquery.com/prop
Solution 2 - Jquery
I found the answer here:
https://web.archive.org/web/20160421163524/http://vijayt.com/Post/Set-RadioButton-value-using-jQuery
Basically, if you want to check one radio button, you MUST pass the value as an array:
$('input:radio[name=cols]').val(['Site']);
$('input:radio[name=rows]').val(['Site']);
Solution 3 - Jquery
In your selector you seem to be attempting to fetch some nested element of your radio button with a given id. If you want to check a radio button, you should select this radio button in the selector and not something else:
$('input:radio[name="cols"]').attr('checked', 'checked');
This assumes that you have the following radio button in your markup:
<input type="radio" name="cols" value="1" />
If your radio button had an id:
<input type="radio" name="cols" value="1" id="myradio" />
you could directly use an id selector:
$('#myradio').attr('checked', 'checked');
Solution 4 - Jquery
You can try the following code:
$("input[name=cols][value=" + value + "]").attr('checked', 'checked');
This will set the attribute checked for the radio columns and value as specified.
Solution 5 - Jquery
Why do you need 'input:radio[name=cols]'
. Don't know your html, but assuming that ids are unique, you can simply do this.
$('#'+newcol).prop('checked', true);
Solution 6 - Jquery
Try this:
$("#" + newcol).attr("checked", "checked");
I've had issues with attr("checked", true)
, so I tend to use the above instead.
Also, if you have the ID then you don't need that other stuff for selection. An ID is unique.
Solution 7 - Jquery
Using .filter()
also works, and is flexible for id, value, name:
$('input[name="cols"]').filter("[value='Site']").attr('checked', true);
(seen on this blog)
Solution 8 - Jquery
In my case, radio button value is fetched from database and then set into the form. Following code works for me.
$("input[name=name_of_radio_button_fields][value=" + saved_value_comes_from_database + "]").prop('checked', true);
Solution 9 - Jquery
Since newcol
is the ID of the radio button, You can simply use it as below.
$("#"+newcol).attr('checked',true);
Solution 10 - Jquery
Combining previous answers:
$('input[name="cols"]').filter("[value='Site']").click();
Solution 11 - Jquery
You can simply use:
$("input[name='cols']").click();
Solution 12 - Jquery
The chosen answer works in this case.
But the question was about finding the element based on radiogroup and dynamic id, and the answer can also leave the displayed radio button unaffected.
This line does selects exactly what was asked for while showing the change on screen as well.
$('input:radio[name=cols][id='+ newcol +']').click();
Solution 13 - Jquery
$('#a_state option[value="'+a_state+'"]').prop("selected", true);
prop()
is the best option because attr sometimes works randomly.
Solution 14 - Jquery
in my case, i use (to active Css animation when click radio)
$('input:radio[name="cols"]').trigger ('click');