[RESOLVED]Trying to check a radio button

 <script type ="text/javascript">

      jQuery(document).ready(function () {
 
          $(‘input:radio[name=cars]‘)[0].checked = true;

      });

  </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:RadioButton ID="RadioButton1" name = "cars" Text= "Corvette" runat="server" />
         <asp:RadioButton ID="RadioButton2" name = "cars" Text= "Corolla" runat="server" />
  
    </div>
    </form>
</body>
</html>

The Radio Button server control renders the "name" attribute as RadioButton1 and RadioButton2.  Which is overriding your markup and why the JQuery is not working as expected. 

        jQuery(document).ready(function () {
            var radioID = $('input:radio')[0].id;
            $('#' + radioID).attr('checked', 'checked');
        });

you can try with this but not with name

<script type ="text/javascript">
$(document).ready(function () {
$(‘input[type="radio"]‘).each(function () {
$(this).attr("checked", true);
});
});

</script>

You can use the Jquery ID Selector (“#id”) to select the Radiobutton. You also need ensure that you are using the
prop to select the checkbox

Sample Code:

 <script>
        $(document).ready(function () {
        //Select the RadioButton 1
            $("#RadioButton1").prop('checked', true);
        });
       
    </script>

HTML:

<asp:RadioButton ID="RadioButton1" name = "cars" Text= "Corvette" runat="server" />
         <asp:RadioButton ID="RadioButton2" name = "cars" Text= "Corolla" runat="server" />

You can use the prop() function to set the checked property to true for a particular element as follows :

$(function () {
    $('<%= RadioButton1.ClientID %>').prop('checked',true);
});

The above function will check your RadioButton1 element using the ClientID property to resolve the appropriate ID that will be rendered client-side. There are a few other ways to handle this such as using the
.attr() function to set the checked attribute, but prop() is generally a bit safer.

Hi davelewicki,

Thanks for your post.

We could use .attr() method or .prop() method
to set one or more properties for every matched element, if you’d like to meke the first radio button checked, you could refer to the following sample.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../../Scripts/jquery-1.8.2.js"></script>
    <script>
        $(function () {
            // use .attr() method 
            $(":radio").first().attr("checked", true);
            //or use .prop() method 
            //$(":radio").first().prop("checked", true);
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:RadioButton ID="RadioButton1" name="cars" Text="Corvette" runat="server" />
            <asp:RadioButton ID="RadioButton2" name="cars" Text="Corolla" runat="server" />
        </div>
    </form>
</body>
</html> 

Besides, you could check the following links to get more about .attr() method and .prop() method.

If you have any question about this issue, please post back freely.

Best Regards,

Fei Han

Leave a Reply