When the
CheckBox is clicked based on whether it is
checked (selected) or
unchecked (unselected), the
HTML DIV with
TextBox will be shown or hidden.
Show Hide DIV with TextBox when CheckBox is checked unchecked using JavaScript
When the
CheckBox is clicked, the
ShowHideDiv JavaScript function is executed. Inside this function, based on whether
CheckBox is
checked (selected) or
unchecked (unselected), the
HTML DIV with
TextBox is shown or hidden.
<script type="text/javascript">
function ShowHideDiv(chkPassport) {
var dvPassport = document.getElementById("dvPassport");
dvPassport.style.display = chkPassport.checked ? "block" : "none";
}
</script>
<label for="chkPassport">
<input type="checkbox" id="chkPassport" onclick="ShowHideDiv(this)" />
Do you have Passport?
</label>
<hr />
<div id="dvPassport" style="display:none">
Passport Number:
<input type="text" id="txtPassportNumber" />
</div>
Show Hide DIV with TextBox when CheckBox is checked unchecked using jQuery
When the
CheckBox is clicked, based on whether
CheckBox is
checked (selected) or
unchecked (unselected), the
HTML DIV with
TextBox is shown or hidden.
<script type="text/javascript">
$(function () {
$("#chkPassport").click(function () {
if ($(this).is(":checked")) {
$("#dvPassport").show();
}else {
$("#dvPassport").hide();
}
});
});
</script>
<label for="chkPassport">
<input type="checkbox" id="chkPassport" />
Do you have Passport?
</label>
<hr />
<div id="dvPassport" style="display:none">
Passport Number:
<input type="text" id="txtPassportNumber" />
</div>
Screenshot
![Show Hide DIV with TextBox when CheckBox is checked unchecked using JavaScript and jQuery]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
