Introduction: Hello Guys, “Welcome back” Today, I am here with another one new great article. In this article I explained how to display or show and hide or invisible HTML DIV with TextBox when CheckBox will be checked and unchecked or selected and unselected by using JavaScript as well as jQuery. When user will click on the CheckBox based on whether it is checked (selected) or unchecked (unselected), the HTML DIV with TextBox will be show or hide.
Join our Channel on Whtsapp and Telagram for All Updates
Display Hide DIV with TextBox on CheckBox checked unchecked using JavaScript
On the HTML page I will place two controls and a div, first control will be CheckBox with the id named chk_question and an HTML DIV with the id named div_question and inside this div I will place a TextBox with the id named txt_question. OnClick event handler of the CheckBox I will assign JavaScript function named display_hide_div. When user will click on the CheckBox, the display_hide_div JavaScript function will be executed. In this function, based on whether CheckBox is checked (selected) or unchecked (unselected), the HTML DIV with TextBox will be show or hide.
<script type="text/javascript">
function display_hide_div (chkPassport) {
var divquestion = document.getElementById("div_question");
divquestion.style.display = chkquestion.checked ? "block" : "none";
}
</script>
<label for="chkquestion">
<input type="checkbox" id="chk_question" onclick=" display_hide_div (this)" />
Have you any questions?
</label>
<hr />
<div id="div_question" style="display:none">
Question:
<input type="text" id="txt_question" />
</div>
You can copy and paste the whole code on your HTML page with JavaScript that I mentioned below to enjoy the execution of the program.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
</style>
</head>
<body>
<script type="text/javascript">
function display_hide_div(chk_question) {
var dvquestion = document.getElementById("div_question");
dvquestion.style.display = chk_question.checked ? "block" : "none";
}
</script>
<label for="chk_question">
<input type="checkbox" id="chk_question" onclick="display_hide_div(this)" />
Do you have any Question?
</label>
<hr />
<div id="div_question" style="display: none">
Question:
<input type="text" id="txtPassportNumber" />
</div>
</body>
</html>
Show Hide DIV with TextBox when CheckBox is checked unchecked using jQuery
On the HTML page I will place two controls and a div, first control will be CheckBox with the id named chk_question and an HTML DIV with the id named div_question and inside this div I will place a TextBox with the id named txt_question. Here I also inherited the jQuery file <script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script> The CheckBox has been assigned a jQuery OnClick event handler. When user will be clicked on CheckBox, based on whether CheckBox is checked (selected) or unchecked (unselected), the HTML DIV with TextBox is shown or hidden.
<script type="text/javascript">
$(function () {
$("#chk_question").click(function () {
if ($(this).is(":checked")) {
$("#div_question").show();
}else {
$("# div_question").hide();
}
});
});
</script>
<label for="chkquestion">
<input type="checkbox" id="chk_question" />
Have you any questions?
</label>
<hr />
<div id="div_question" style="display:none">
Question:
<input type="text" id="txt_question" />
</div>
You can copy and paste the whole code on your HTML page with jQuery that I mentioned below to enjoy the execution of the program.
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#chk_question").click(function () {
if ($(this).is(":checked")) {
$("#div_question").show();
} else {
$("#div_question").hide();
}
});
});
</script>
<label for="chk_question">
<input type="checkbox" id="chk_question" />
Do you have any Question?
</label>
<hr />
<div id="div_question" style="display: none">
Question:
<input type="text" id="txt_question" />
</div>
</body>
</html>
Conclusion: In above code, I explained how to display or show and hide or invisible HTML DIV with TextBox when CheckBox will be checked and unchecked or selected and unselected by using JavaScript as well as jQuery. Bye and take care of you Developers. We will come back again shortly with the new article.
Regards
Programming Hub
