jQuery Set RadioButton to be Checked


InterServer Web Hosting and VPS
Sony Playstation PS4 Pro Custom Build NVMe SSD Drive - Enclosure case and Crucial NVMe SSD
PS4 Pro Custom External SSD NVMe Drive

How I built a PS4 Pro Custom External SSD NVMe Drive...

NUC8i7BEH with memory
Intel NUC8I7BEH Review and Custom Build

This is my review of the Intel NUC8i7BEH and a summary of my build...

Card image cap
Asus M5A88-M EVO Review

This is my review of the Asus M5A88-M EVO motherboard...

Corsair Vengeance Blue 8GB (2x4GB) DDR3 PC3-12800C9 1600MHz Dual Channel Kit
Corsair Vengeance Blue Review

This is my review of the Corsair Vengeance Blue 8GB (2x4GB) DDR3 PC3-12800C9 1600MHz Dual Channel Kit memory...

Robotic Arm with USB PC Interface Review
Robotic Arm with USB PC Interface Review

This is my review of the Robotic Arm with USB PC Interface...

jQuery Set RadioButton to be Checked

Here we look at how to use jQuery to set an ASP.NET RadioButton control to be checked.

RadioButton doesn't Postback

The reason I've had to do this in jQuery was that I came across a situation where I have a group of RadioButton's outside of an UpdatePanel, they are all set for AutoPost = 'true', and they all call the same method for the CheckedChanged event. I set some AsyncPostBackTriggers so that they cause the UpdatePanel to update, they update a repeater's data results inside the UpdatePanel. Now this all works fine, until I want to set one of the RadioButtons to be checked by default on PageLoad. Now the RadioButton which is checked by default on PageLoad no longer posts back to the server, I even checked with Fiddler to watch the internet traffic, and nothing is happening with that RadioButton, though the other ones are fine.

So as a fix for this, I've used jQuery to make the RadioButton to be checked, instead of doing it the C# code, and now everything works fine.

jQuery Set RadioButton to be Checked Example

Right so firstly I use the $(document).ready(handler) method to ensure the page has loaded and all the .NET controls will be on the page. Then I use the .ClientID property of the .NET control to help obtain the correct ID of the ASP.NET RadioButton control (.NET 3.5). That is enough to get jQuery to find the control, so next up we call the jQuery .attr(attributeName, value) method which allows us to set attributes on the element, in this case we set the 'checked' attribute to become 'checked', and voila, our RadioButton will now be checked when the page first loads.


  $(document).ready(function() {
    $('#' + '<%=RadioButton_GreenCars.ClientID %>').attr('checked', 'checked');
  });


Sponsored Links
SolarSystem - AngularJS Demo
SolarSystem - Angular JS Demo

Check out my first Angular JS demo hosted in Azure, it helped win my first Angular contract. Put the sound on.