In this article, you will learn how to show and hide div on checkbox check or uncheck using jquery or javascript. There are many ways to show or hide div on checkbox check or uncheck.
Here are some examples to show or hide div on checkbox check or uncheck using JQuery or javascript.
In this example, we used the is() function and :checked selector to show or hide the div on checkbox check or uncheck using jquery.
Here is the source code of the program to show or hide the div on checkbox check or uncheck using is() function and :checked selector in JQuery.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>How To Show and Hide Div on CheckBox Check or Uncheck
Using JQuery or Javascript?</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<label for="chkEmail">
<input type="checkbox" id="chkEmail" />
Do you have Email ID?
</label>
<hr />
<div id="div_email" style="display: none;">
Enter Email ID:
<input type="text" id="txtEmail" />
</div>
<div id="div_addEmail">
Add New Email ID
</div>
<script>
$(function () {
$("#chkEmail").click(function () {
if ($(this).is(":checked")) {
$("#div_email").show();
$("#div_addEmail").hide();
} else {
$("#div_email").hide();
$("#div_addEmail").show();
}
});
});
</script>
</body>
</html>In this example, we used the toggle() function to show or hide the div on checkbox check or uncheck using jquery. The toggle() function is used to check the visibility of selected elements to toggle between hide() and show() for the selected elements. This toggle() function takes the three parameters as follows: speed, easing, callback.
Here is the source code of the program to show or hide the div on checkbox check or uncheck using the toggle() function in JQuery.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>How To Show and Hide Div on CheckBox Check or Uncheck
Using JQuery or Javascript</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<style>
.display {
display: none;
}
</style>
</head>
<body>
<label for="chkEmail">
Do you have Email?
<input type="checkbox" id="chkEmail" />
yes
</label>
<hr />
<div id="div_Email" class="display">
Email ID:
<input type="text" id="txtEmail" />
</div>
<script>
$(function () {
$("#chkEmail").on("click", function () {
$(".display").toggle(this.checked);
});
});
</script>
</body>
</html>In this example, we are not using any jquery function. This example reference is purely javascript based.
Here is the source code of the program to show or hide the div on checkbox check or uncheck using the Javascript.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>How To Show and Hide Div on CheckBox Check or Uncheck
Using JQuery or Javascript?</title>
</head>
<body>
<label for="chkEmail">
Do you have Email?
<input type="checkbox" id="chkEmail" onclick="myFunction()" />
yes
</label>
<hr />
<div id="div_Email" style="display: none;">
Email ID:
<input type="text" id="txtEmail" />
</div>
<script>
function myFunction() {
var checkBox = document.getElementById("chkEmail");
var div = document.getElementById("div_Email");
if (checkBox.checked == true) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
</script>
</body>
</html>I hope this article will help you to understand how to show and hide div on checkbox check or uncheck using jquery or javascript
Share your valuable feedback, please post your comment at the bottom of this article. Thank you!
Comments