Is there a way to programmatically set a radio button in a group without physically clicking on the button? I am attempting to open a jQuery page and depending on a stored value, the corresponding radio button should be selected. I have researched similar topics and tried various solutions, but none seem to work for me. To illustrate my use case, I have created a jsfiddle: http://jsfiddle.net/yZejX/2/.
Here is the HTML:
<input type="radio" name="test" id="radio-choice-1" value="3">Test1</input>
<br>
<input type="radio" name="test" id="radio-choice-2" value="4">Test2</input>
<br>
<input type="radio" name="test" id="radio-choice-3" value="5">Test3</input>
And here is the JS code I've tried:
// Attempting to set attribute directly
$("#radio-choice-1").attr('data-icon','radio-on');
$("#radio-choice-2").attr('data-icon','radio-off');
$("#radio-choice-3").attr('data-icon','radio-off');
// Trying to set via click event
$("#radio-choice-2").click();
// Attempting to set via changing attribute and calling change event to update
$("#radio-choice-2").attr('checked','checked').change();
// Trying to set via resetting checked element and changing attribute
$("input[name='test']:checked").removeAttr('checked');
$("input[name='test'][value='3']").attr('checked',true).change();
$("input[name='test'][value='3']").attr('checked','checked').change();
If anyone has any insights on what mistake I might be making or where the issue lies, I would greatly appreciate your feedback.
Thank you for your assistance.