The . val() method can be used to get the value of matched radio elements. When no options are selected, it returns an undefined value. The following code uses .is() inside an event handler and returns true if any radio button is selected.
To check which radio button is selected in a form, we first get the desired input group with the type of input as an option and then the value of this selection can then be accessed by the val() method. This returns the name of the option that is currently selected.
Radio buttons are normally presented in radio groups (a collection of radio buttons describing a set of related options). Only one radio button in a group can be selected at the same time. Note: The radio group must have share the same name (the value of the name attribute) to be treated as a group.
With the help of the attribute selector you can select the input element with the corresponding value. Then you have to set the attribute explicitly, using .attr
:
var value = 5;
$("input[name=mygroup][value=" + value + "]").attr('checked', 'checked');
Since jQuery 1.6, you can also use the .prop
method with a boolean value (this should be the preferred method):
$("input[name=mygroup][value=" + value + "]").prop('checked', true);
Remember you first need to remove checked attribute from any of radio buttons under one radio buttons group only then you will be able to add checked property / attribute to one of the radio button in that radio buttons group.
Code To Remove Checked Attribute from all radio buttons of one radio button group -
$('[name="radioSelectionName"]').removeAttr('checked');
There is a better way of checking radios and checkbox; you have to pass an array of values to the val method instead of a raw value
Note: If you simply pass the value by itself (without being inside an array), that will result in all values of "mygroup" being set to the value.
$("input[name=mygroup]").val([5]);
Here is the jQuery doc that explains how it works: http://api.jquery.com/val/#val-value
And .val([...])
also works with form elements like <input type="checkbox">
, <input type="radio">
, and <option>
s inside of a <select>
.
The inputs and the options having a value that matches one of the elements of the array will be checked or selected, while those having a value that don't match one of the elements of the array will be unchecked or unselected
Fiddle demonstrating this working: https://jsfiddle.net/92nekvp3/
Try this:
$('input:radio[name="mygroup"][value="5"]').attr('checked',true);
JS Fiddle demo.
$("input[name='mygroup'][value='5']").attr("checked", true);
When you change attribute value like mentioned above the change
event is not triggered so if needed for some reasons you can trigger it like so
$('input[name=video_radio][value="' + r.data.video_radio + '"]')
.prop('checked', true)
.trigger('change');
$("input[name='RadioTest'][value='2']").prop('checked', true);
JS fiddle Demo
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With