Check/UnCheck A RadioButton based on a CheckBox value using jQuery

The title is as amusing as the request I got recently from one of the users. He had a requirement where he had to Check/Uncheck or Select/Deselect an ASP.NET RadioButton based on the value of another ASP.NET CheckBox using client side code. I suggested him to do it using jQuery. The same solution will also work for HTML controls too. Here's how:

<html xmlns="">

<head runat="server">


<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function() {


             function() {









    <form id="form1" runat="server">


        <asp:RadioButton ID="RadioButton1" runat="server" Checked="false" Text="UnCheckMe" />

        <asp:CheckBox ID="CheckBox1" runat="server" Text="ChkUnChkRadio" />





Will you give this article a +1 ? Thanks in advance

About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal


Pieter said...

Hi, thanks for your post. I have a similar scenario, but now with checkboxes and radio buttons.

In a case where in the radio button is defined as selected (checked), I sometimes want to uncheck it with jQuery:
$('[class=subx]').slideUp(200).each(function () { $(this).find("input:checked").attr('checked', false) ;

This visually unchecks the checkboxes and radiobuttons with the appropriate class. However, when I then read in a postback the value of the radio button in ASP.NET:
selectValue = qAnswerList.SelectedValue;
I get the answer as if the radio button has not been cleared.
Any suggestions would be appreciated.

Pieter said...

Hi, I found the solution to the problem above.
I have added an extra radio button with value 0, and style="display:none"
ListItem li = new ListItem("", "0");
li.Attributes.Add("style", "display:none");

Then I can set this hidden radio button when I need to clear the selection:

$('[class=subx'])').slideUp(200).each(function () {
$(this).find('input[type=radio]:eq(0)').attr('checked', true);
$(this).find("input:checkbox:checked").attr('checked', false);

This works wonderful!