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, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 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!