Show Hide DIV with TextBox based on RadioButton selection (checked unchecked) using JavaScript and jQuery


In this article I will explain how to show and hide HTML DIV with TextBox based RadioButton selection or click i.e. when RadioButtons are checked (selected) and unchecked (unselected) using jQuery.



When the RadioButton is clicked based on whether it is checked (selected) or unchecked (unselected), the HTML DIV with TextBox will be shown or hidden.

Html 

<span>Do you have Aadhar?</span>
<label for="chkYes">
    <input type="radio" id="chkYes" name="chkAadhar" />
    Yes
</label>
<label for="chkNo">
    <input type="radio" id="chkNo" name="chkAadhar" />
    No
</label>
<hr />
<div id="dvPassport" style="display: none">
    Aadhar Number:
    <input type="text" id="Aadhar" />
</div>

jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("input[name='chkAadhar']").click(function () {
            if ($("#chkYes").is(":checked")) {
                $("#Aadhar").show();
            } else {
                $("#Aadhar").hide();
            }
        });
    });
</script>

When the RadioButton is clicked, based on Yes RadioButton is checked (selected) or unchecked (unselected), the HTML DIV with TextBox is shown or hidden.





Related Post


Latest Post


Recent Posts Widget

Make sure to never miss a thing...

Get the latest news from the creative industry along with other creative goodies, conveniently delivered to social media.