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
