Write a Javascript Function that Unchecks a Radio Button

How would I write a Javascript function that can be executed from within another Javascript function so that the original Javascript function unchecks a radio button ("Yes" or "No" option) from a RadioButtonList control (if one is checked)?
WebGooberAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

nap0leonCommented:
<form name="myForm">
<fieldset id="radio-button-input">
	<legend>Sample radio buttons</legend>
	<label for="number0"><input type="radio" id="number0" name="number" value="0" checked> Zero</label>
	<label for="number1"><input type="radio" id="number1" name="number" value="1"> One</label>
	<label for="number2"><input type="radio" id="number2" name="number" value="2"> Two</label>
	<label for="number3"><input type="radio" id="number3" name="number" value="3"> Three</label>
	<a href="javascript:getRadioValue('number');">show selection</a>
</fieldset>
<a href="javascript:void(0);" onclick="clearRadio()">clear radio</a>
</form>
<script>
function clearRadio(){
  var radioGroup = document.getElementsByName('number');
  for (i=0; i < radioGroup .length; i++) {
 
    if (radioGroup [i].checked == true) { // if a button in group is checked,
          radioGroup [i].checked = false;  // uncheck it
      }
     
  }    
}
</script>

Open in new window


You can easily call the function "clearRadio()" from inside another function and can parameterize it so that you can pass it the name of the radio button group you want to clear.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
WebGooberAuthor Commented:
Thank you that helps a lot... and while it works within a single .aspx page - it does NOT work when I use it when a MasterPage. Here's what I have:

 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>

    <script type="text/javascript" language="javascript">
        function GetQuestionValue(sender, showw)
          {
            var showdiv = document.getElementById(showw);
            var radio = sender.getElementsByTagName('input');
            if(radio.length > 0)
            {
            for(var k=0 ; k < radio.length ; k++)
            {
              if(radio[k].checked == true && radio[k].value == "1")
              {
                showdiv.style.display ="block" ;
              }
              else if(radio[k].checked == true && radio[k].value == "2")
              {
			    showdiv.style.display = "none";
              }
            }
            }
        }
        
        function GetSubQuestionValue(sender, show1, show2, show3)
          {
            var showdiv1 = document.getElementById(show1);
            var showdiv2 = document.getElementById(show2);
            var showdiv3 = document.getElementById(show3);
            var radio = sender.getElementsByTagName('input');
            if(radio.length > 0)
            {
            for(var k=0 ; k < radio.length ; k++)
            {
              if(radio[k].checked == true && radio[k].value == "1")
              {
                showdiv1.style.display = "block";
                showdiv2.style.display = "none";
                showdiv3.style.display = "none";
                clearRadio();
              }
              else if(radio[k].checked == true && radio[k].value == "2")
              {
			    showdiv1.style.display = "none";
			    showdiv2.style.display = "none";
			    showdiv3.style.display = "none";
              }
              else if(radio[k].checked == true && radio[k].value == "3")
              {
                showdiv1.style.display = "none";
                showdiv2.style.display = "block";
                showdiv3.style.display = "none";
              }
            }
            }
        }
        
        function clearRadio(){
          var radioGroup = document.getElementsByName('radSubQuestion');
          for (i=0; i < radioGroup .length; i++) {
         
            if (radioGroup [i].checked == true) { // if a button in group is checked,
                  radioGroup [i].checked = false;  // uncheck it
              }
             
          }    
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">

    <table style="width: 100%">
		<tr>
			<td style="width: 19px" valign="top"><strong>Q</strong></td>
			<td>
                First Question</td>
		</tr>
        <tr>
            <td style="width: 19px">
            </td>
            <td>
                <asp:RadioButtonList ID="radQuestion" runat="server">
                    <asp:ListItem Text="Yes" Value="1"></asp:ListItem>
                    <asp:ListItem Text="No" Value="2"></asp:ListItem>
                    <asp:ListItem Text="Not Applicable" Value="3"></asp:ListItem> 
                </asp:RadioButtonList>
            </td>
        </tr>
		<tr>
			<td style="width: 19px">&nbsp;</td>
			<td>
			&nbsp;</td>
		</tr>
		</table>
    <div id="showdiv2" runat="server" style="display:none">
	<table style="width: 100%">
		<tr>
			<td style="width: 17px">&nbsp;</td>
			<td>
			<table cellpadding="4" cellspacing="1" style="width: 600px; border-collapse: collapse; border: 1px solid #808080">
				
			<tr>
					<td style="background-color: #808080">
					<span style="color: #FFFFFF"><strong>Enter Required Information&nbsp;</strong></span></td>
				</tr>
				<tr>
					<td>Please enter detailed information for Question #1:<br />
                        &nbsp;<br />
                        &nbsp; &nbsp;
                        <asp:TextBox ID="txtRequired" runat="server" Height="54px" Rows="5" TextMode="MultiLine"
                            Width="545px"></asp:TextBox><br />
                        &nbsp;</td>
				</tr>
			</table></td>
		</tr>
	</table>
	</div>
    <div id="showdiv1" runat="server" style="display:none">
	<table style="width: 100%">
        <tr>
            <td style="width: 17px">
                <strong>Q</strong></td>
            <td>
                Second Question</td>
        </tr>
        <tr>
            <td style="width: 17px">
            </td>
            <td>
                <asp:RadioButtonList ID="radSubQuestion" runat="server">
                    <asp:ListItem Text="Yes" Value="1"></asp:ListItem>
                    <asp:ListItem Text="No" Value="2"></asp:ListItem>
                </asp:RadioButtonList></td>
        </tr>
     </table>
     </div>
     <div id="showdiv3" runat="server" style="display:none">
     <table style="width: 100%">
        <tr>
            <td style="width: 17px">
            </td>
            <td>
                &nbsp;</td>
        </tr>
		<tr>
			<td style="width: 17px">&nbsp;</td>
			<td>
			<table cellpadding="4" cellspacing="1" style="width: 600px; border-collapse: collapse; border: 1px solid #808080">
				
			<tr>
					<td style="background-color: #808080">
					<span style="color: #FFFFFF"><strong>Enter Required Information&nbsp;</strong></span></td>
				</tr>
				<tr>
					<td>Please enter detailed information for Question #2:<br />
                        &nbsp;<br />
                        &nbsp; &nbsp;
                        <asp:TextBox ID="txtRequired2" runat="server" Height="54px" Rows="5" TextMode="MultiLine"
                            Width="545px"></asp:TextBox><br />
                        &nbsp;</td>
				</tr>
			</table>
			</td>
		</tr>
     </table>
     </div>
                             
    </form>
</body>
</html>

Open in new window


And I also have the following code in the Page_Load event:

 
protected void Page_Load(object sender, EventArgs e)
    {
        radQuestion.Attributes.Add("onClick", string.Format("GetSubQuestionValue(this,'{0}','{1}','{2}');", showdiv1.ClientID, showdiv2.ClientID, showdiv3.ClientID));
        radSubQuestion.Attributes.Add("onClick", string.Format("GetQuestionValue(this,'{0}');", showdiv3.ClientID));
    }

Open in new window


So, basically, when I click on "Yes" for the first question, then the second question should display. Then, I can click on "Yes" for the second question and a input area displays. Now, when I reclick on the "Yes" option for the first question again, then your javascript kicks in and unchecks the second question altogether.

All of which works great within a single .aspx page; however, as soon as I copy it within my project that uses a MasterPage, then your code stops working.

Do you know what's causing this to stop working and how would I fix this?
0
ddayx10Commented:
What're you up to today @WebGoober??

You trying to clear the RadSubQuestion out if the user selects YES on radQuestion? Kindof in case it had been checked selected then hidden before it is clear on subsequent activity?

If that's the case then the "easy" suggestion should work for you this time (at least it did for me)...

<see snippet>
function clearRadio(){
          var radioGroup = document.getElementsByName('<%=radSubQuestion.UniqueID %>');
          for (i=0; i < radioGroup .length; i++) {
         
            if (radioGroup[i].checked == true) { // if a button in group is checked,
                  radioGroup[i].checked = false;  // uncheck it
              }
             
          }    
        }

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

nap0leonCommented:
Alas, my experience with code behinds is very limited.
Are you receiving any errors or does it just not fire?
0
ddayx10Commented:
You need to run the controls he sampled and see how they render on the page @nap0leon then you can see how the name attributes are being skewed (sp) by the use of a masterpage.

Also @WebGoober an alternate to the way I had you set that up yesterday can be had by changing things around like this:


function GetQuestionValue(showw)
      {
        //debugger;
        var showdiv = document.getElementById(showw);
        var radio = document.getElementsByName('<%=radQuestion.UniqueID %>');
        //etc

Open in new window

radSubQuestion.Attributes.Add("onClick", string.Format("GetQuestionValue('{0}');", showdiv3.ClientID));

Open in new window

0
WebGooberAuthor Commented:
Excellent!!! Thank you "nap0leon" for putting me on the right track in the first place and thank you "ddayx10" for getting this to work with a MasterPage template. Thank you... !!!!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.