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

March 28, 2009

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

Saturday, March 28, 2009 Posted by Suprotim Agarwal
Labels: ASP.NET, 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="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

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

<script type="text/javascript">

    $(document).ready(function() {

        $('#CheckBox1').click(

             function() {

                 $("input[type='radio']").attr('checked',

                 $('#CheckBox1').is(':checked'));

             });

    });

</script>

</head>

<body>

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

    <div>

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

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

    </div>

    </form>

</body>

</html>

'Like' us on our FaceBook page if you find this blog useful. Thanks!

Did you like this post?


			Save on Delicious
	subscribe via rss		subscribe via e-mail
	print this post		follow me on twitter

About The Author

Suprotim Agarwal, ASP.NET Architecture MVP 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 has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal

comments

2 Responses to "Check/UnCheck A RadioButton based on a CheckBox value using jQuery"

Pieter said...

January 11, 2011 6:30 PM

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

In a case where in asp.net 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
Pieter said...

January 12, 2011 9:03 AM

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");
qAnswerList.Items.Add(li);

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!