44

How to set radio button selected value in javascript:

HTML Code :

<input type="radio" name="RBLExperienceApplicable" class="radio" value="1" > 
<input type="radio" name="RBLExperienceApplicable" class="radio" value="0" >


<input type="radio" name="RBLExperienceApplicable2" class="radio" value="1" > 
<input type="radio" name="RBLExperienceApplicable2" class="radio" value="0" >

ASPX Code

     <asp:RadioButtonList ID="RBLExperienceApplicable" runat="server" class="radio"    RepeatDirection="Horizontal" EnableViewState="false">
            <asp:ListItem Value="1" Text="Yes &nbsp;&nbsp;"></asp:ListItem> 
                <asp:ListItem Value="0" Text="No"></asp:ListItem>
        </asp:RadioButtonList>

     <asp:RadioButtonList ID="RBLExperienceApplicable2" runat="server" class="radio"  RepeatDirection="Horizontal" EnableViewState="false">
            <asp:ListItem Value="1" Text="Yes &nbsp;&nbsp;"></asp:ListItem> 
                <asp:ListItem Value="0" Text="No"></asp:ListItem>
        </asp:RadioButtonList>

// Some Code Fetch from db
// Based on db value script block will execute

 <script type="text/javascript">
        RadionButtonSelectedValueSet('1');
 </script>

Script Block :

function RadionButtonSelectedValueSet(SelectdValue) {
    $('#RBLExperienceApplicable').val(SelectdValue);
        //$("input[name='RBLExperienceApplicable']:checked").val(SelectdValue);
}
1
  • can you share the generated html instead of ASP code Oct 10, 2013 at 11:05

13 Answers 13

83

Try

function RadionButtonSelectedValueSet(name, SelectdValue) {
    $('input[name="' + name+ '"][value="' + SelectdValue + '"]').prop('checked', true);
}

also call the method on dom ready

<script type="text/javascript">
jQuery(function(){
    RadionButtonSelectedValueSet('RBLExperienceApplicable', '1');
})
</script>
6
  • @Sam can you share the generated html... is there a name attribute for the radios Oct 10, 2013 at 11:06
  • @Sam can you share the generated html instead of asp code from the browser view source Oct 10, 2013 at 11:10
  • Thanks..Works fine.. But above script problem with some brwser.. Little bit modification in code such as : '$('input[name="' + name + '"][value="' + SelectdValue + '"]').attr('checked', true);'
    – user2636638
    Oct 10, 2013 at 11:52
  • @Sam don't use .attr() to set the checked value if you are using jQuery > 1.6, see prop vs attr Oct 10, 2013 at 11:56
  • @Arul prop not worked in myside.. I have use jquery 1.3.6 only.. Shall i proceed with same..
    – user2636638
    Oct 10, 2013 at 12:00
33

You can do more elegantly.

function RadionButtonSelectedValueSet(name, SelectedValue) {
    $('input[name="' + name+ '"]').val([SelectedValue]);
}
4
  • 2
    Nice. This val([...]) syntax also works for other inputs, including <textarea> and <select>. Like I can get all visible inputs using var inputs = $("form :input:visible[type!=button]"), then get all their values using var values = {}; inputs.serializeArray().map( function(x){values[x.name] = x.value} ) and some time later restore all using inputs.map( function(){var value = values[this.name]; if(value) $(this).val([value])} ).
    – Arjan
    Mar 7, 2014 at 19:03
  • 2
    Its important to call val([SelectedValue]), and not val(SelectedValue). The second one will set the value attribute to the same value on all the inputs.
    – spekary
    Jun 22, 2015 at 16:48
  • So is this seeking out the radio button with the correct selected value that is passed in and checking it? Nov 21, 2016 at 19:44
  • 1
    For those wondering if this works everywhere, or is just a hack, here are the docs: api.jquery.com/val/#val-value which clearly explain that using an array will set the appropriate elements with matching values to selected/checked. Therefore you can also use this to select multiple checkboxes or options in a multi-select.
    – spikyjt
    Mar 29, 2017 at 17:24
5

You can try this also

function SetRadiobuttonValue(selectedValue)
{
  $(':radio[value="' + selectedValue + '"]').attr('checked', 'checked');
}
3

Below script works fine in all browser:

function RadionButtonSelectedValueSet(name, SelectdValue) {
     $('input[name="' + name + '"][value="' + SelectdValue + '"]').attr('checked',true);
}
1
$('input[name="RBLExperienceApplicable"]').prop('checked',true);

Thanks dude...

1

If the selection changes, make sure to clear the other checks first. al la...

$('input[name="' + value.id + '"]').attr('checked', false);
$('input[name="' + value.id + '"][value="' + thing[value.prop] + '"]').attr('checked',  true);
               

0

for multiple dropdowns

$('[id^=RBLExperienceApplicable][value='+ SelectedVAlue +']').attr("checked","checked");

here RBLExperienceApplicable is the matching part of the radio button groups input tag ids. and [id^=RBLExperienceApplicable] matches all the radio button whose id start with RBLExperienceApplicable

0
  <input type="radio" name="RBLExperienceApplicable" class="radio" value="1" checked > 
 //       For Example it is checked
 <input type="radio" name="RBLExperienceApplicable" class="radio" value="0" >


<input type="radio" name="RBLExperienceApplicable2" class="radio" value="1" > 
<input type="radio" name="RBLExperienceApplicable2" class="radio" value="0" >


      $( "input[type='radio']" ).change(function() //on change radio buttons
   {


    alert('Test');
   if($('input[name=RBLExperienceApplicable]:checked').val() != '') //Testing value
 {

$('input[name=RBLExperienceApplicable]:checked').val('Your value Without Quotes');

}
    });

http://jsfiddle.net/6d6FJ/1/ Demo

enter image description here

0
  <asp:RadioButtonList ID="rblRequestType">
        <asp:ListItem Selected="True" Value="value1">Value1</asp:ListItem>
        <asp:ListItem Value="Value2">Value2</asp:ListItem>
  </asp:RadioButtonList>

You can set checked like this.

var radio0 = $("#rblRequestType_0");
var radio1 = $("#rblRequestType_1");

radio0.checked = true;
radio1.checked = true;
0

A clean approach I find is by giving an ID for each radio button and then setting it by using the following statement:

document.getElementById('publicedit').checked = true;
0

This is the only syntax that worked for me

$('input[name="assReq"][value="' + obj["AssociationReq"] + '"]').prop('checked', 'checked');
0

Can be done using the id of the element

example

<label><input type="radio" name="travel_mode"  value="Flight" id="Flight"> Flight </label>
<label><input type="radio" name="travel_mode"  value="Train" id="Train"> Train </label>
<label><input type="radio" name="travel_mode"  value="Bus" id="Bus"> Bus </label>
<label><input type="radio" name="travel_mode"  value="Road" id="Road"> Other </label>

js:

$('#' + selected).prop('checked',true);
0
document.getElementById("TestToggleRadioButtonList").rows[0].cells[0].childNodes[0].checked = true;

where TestToggleRadioButtonList is the id of the RadioButtonList.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.