asked on

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)?

ASKER CERTIFIED SOLUTION

nap0leon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

WebGoober

ASKER

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?

SOLUTION

Member_2_4913559

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

nap0leon

Alas, my experience with code behinds is very limited.
Are you receiving any errors or does it just not fire?

Member_2_4913559

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

WebGoober

ASKER

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... !!!!