ASP.Net: Call JavaScript function when RadioButton is checked or unchecked

 In this article I will explain with an example, how to call JavaScript function when a RadioButton is checked (selected) or unchecked (unselected) in ASP.Net using JavaScript. 

 

ASP.Net: Call JavaScript function when RadioButton is checked or unchecked

The HTML Markup consists of two ASP.Net RadioButtons (one for Yes and other for No) and an HTML DIV consisting of a TextBox. Each ASP.Net RadioButton has been assigned a JavaScript OnClick event handler.

Note: The ASP.Net RadioButtons must be set with exact same GroupName property in order to make them mutually exclusive.

 

When the RadioButton is clicked, the ShowHideDiv JavaScript function is executed. Inside this function, based on whether Yes RadioButton is checked (selected) or unchecked (unselected), the HTML DIV with TextBox is shown or hidden.

<script type="text/javascript">

    function ShowHideDiv() {

        var chkYes = document.getElementById("<%=chkYes.ClientID %>");

        var dvPassport = document.getElementById("dvPassport");

        dvPassport.style.display = chkYes.checked ? "block" : "none";

    }

</script>

<span>Do you have Passport?</span>

<asp:RadioButton ID="chkYes" GroupName="Passport" Text="Yes" runat="server" onclick="ShowHideDiv()" />

<asp:RadioButton ID="chkNo" GroupName="Passport" Text="No" runat="server" onclick="ShowHideDiv()" />

<hr />

<div id="dvPassport" style="display: none">

    Passport Number:

    <input type="text" id="txtPassportNumber" />

</div>