Show/Hide Control on Radio Button Click Using JavaScript

Introduction 

Many times in web development we want to show or hide control or change the particular control or change the text or value of particular control without reloading the page.

For smiler scenario we can write simple JavaScript function for the same.

Using the code

Below is the brief code for the same or follow the below step. 

1. Take two radio button on design page and set the property,
2. Set Onclick = "FunctionName();" for the same radio button
3. Also add one label which is Hide or Show by clicking the Radio Button.
4. After that write a JavaScript function in the Head section as given below.

<p>
    <asp:RadioButton runat="server" ID="RdbOne" Checked="true" 
            Text="Visible" GroupName="RdbTest" onclick="ShowHide('1');" />
    <asp:RadioButton runat="server" ID="RdbTwo" Text="Hide" 
            GroupName="RdbTest" onclick="ShowHide('2');" />
</p>  
<p>
    <asp:Label runat="server" ID="LblShowHide" Text="Show Me Hide Me "></asp:Label>
</p> 
<script type="text/javascript">
    function ShowHide(val) {
        var lblShowHide = document.getElementById('<% = LblShowHide.ClientID %>');
        if (val == 1) {
            lblShowHide.style.visibility = 'visible';
        }
        else {
            lblShowHide.style.visibility = 'hidden';
        }
    }
</script>

Points of Interest

This is article is helpful for coder whose newly start the Coding in Web environment.