I have a RadioButtonList. When the user selects the first RadioButton in the list, I want a textbox to be displayed. For all other RadioButtons, I want this textbox to be hidden. I want this behaviour to be consistent when the user presses the Back button after navigating out of the page

RadioButtonList is a table of RadioButtons having the same name. Each RadioButton has a OnClick event that we can handle in Javascript. Here is the code for hiding/unhiding the textbox on Radiobutton click 


   <asp:RadioButtonList ID="lstRadio" runat="server">
    <asp:ListItem Text="Indv" Value="0" OnClick="toggle();"></asp:ListItem>
    <asp:ListItem Text="Entity" Value="1" OnClick="toggle();"></asp:ListItem>
   </asp:RadioButtonList>
   <asp:TextBox ID="txtDOB" runat="server"></asp:TextBox>
Note the OnClick on ListItem. The OnClick is a client-side event handler. The toggle() function is below: 

function toggle() {
	var lst = document.getElementsByName('lstRadio');
        
	if (lst[1].checked == true)
            document.getElementById('txtDOB').style.display = 'inline';
        else
            document.getElementById('txtDOB').style.display = 'none';
            
    }
The Radio buttons with name - lstRadio can be got by document.getElementsByName(). The first radiobutton is the second element in the array or lst[1]. This is because the RadioButtonList server control renders the table holding the radiobuttons with the same name - lstRadio. Finally, to ensure that this behaviour is consistent across postbacks and back-button navigation, the body onload event handler should call the toggle() function. This ensures that the behaviour of the RadioButtonList is consistent. 

<body onload="toggle();">