jQuery UI radio button array, default value selection
How to set a default value for a jQuery UI radio button
Consider a div with a radio button array created with the following HTML code
1 2 3 4 | <div>
<input type="radio" id="active_true" name="active[]" value="active" /><label for="active_true">Active</label>
<input type="radio" id="active_false" name="active[]" value="inactive" /><label for="active_false">Inactive</label>
</div> |
Below you will find example jQuery code to select a default value for a radio button
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | $(function() { //Firstly, upon document ready we call the jQuery .buttonset() function on the containing div //to style the jQuery UI element, like so: $('#activations').buttonset(); //we will set a variable to test against but generally this will be a program input //in our case, we must test against the radio button's value being 'active' or 'inactive' var someValue = 'active'; //next, we'll get a reference to the button array var btnActive = $('[name=active[]]'); $(btnActive).each(function() { // test the value of the radio against our variable if( $(this).val() == someValue ) { $(this).attr('checked', true); $(btnActive).button("refresh"); } }): }); |
The most important aspect of this code is the call to the .button(“refresh”) method. Without this, you will not see any visible change to the UI radio button’s selected state.
2 Responses to “jQuery UI radio button array, default value selection”
Leave a Reply
Blog Categories
Search
Contact Us
Kromosome Industries Pty. Ltd.
A.B.N. 13007002182
Melbourne, Australia
12 / 17 Como Avenue
South Yarra, Victoria
Australia 3141
T: 0424 767 060
Tweet to @mat_garland_1
Thank you for this jquery code. I was having some trouble with it on my chrome extension, but it’s working now!
It’s a pleasure Dan, I’m glad that the code sample has been able to assist somebody!