I need a page with checkboxes and visible div if at minimum 1 is checked.
Here I got page that if i check checkbox, the div will show. It's okay and works correctly.
When I check 3 checkboxes and uncheck 1, the div is missing, when i check some box again, the div will show - it isn't correct.
How do I need modify the script to show all time the div, if at minimum 1 checkbox is checked, without this "jumping"?
<html> <head> <title>CB Hide/Show</title> <script type="text/javascript"> <!-- function showMe (it, box) { var vis = (box.checked) ? "block" : "none"; document.getElementById(it).style.display = vis; } //--> </script> </head> <body> <h3 align="center"> This JavaScript shows how to hide divisions </h3> <div id="div1" style="display:none"> <table border=1 id="t1"> <tr> <td>i am here!</td> </tr> </table> </div> <form> <input type="checkbox" name="c1" title="showMe('div1', this)">Show Hide Checkbox <input type="checkbox" name="c1" title="showMe('div1', this)">Show Hide Checkbox <input type="checkbox" name="c1" title="showMe('div1', this)">Show Hide Checkbox <input type="checkbox" name="c1" title="showMe('div1', this)">Show Hide Checkbox <input type="checkbox" name="c1" title="showMe('div1', this)">Show Hide Checkbox <input type="checkbox" name="c1" title="showMe('div1', this)">Show Hide Checkbox <input type="checkbox" name="c1" title="showMe('div1', this)">Show Hide Checkbox <input type="checkbox" name="c1" title="showMe('div1', this)">Show Hide Checkbox <input type="checkbox" name="c1" title="showMe('div1', this)">Show Hide Checkbox <input type="checkbox" name="c1" title="showMe('div1', this)">Show Hide Checkbox <input type="checkbox" name="c1" title="showMe('div1', this)">Show Hide Checkbox <input type="checkbox" name="c1" title="showMe('div1', this)">Show Hide Checkbox </form> </body> </html>In this article I will explain how to show and hide HTML DIV with TextBox when CheckBox is checked (selected) and unchecked (unselected) using JavaScript and jQuery.
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
The HTML Markup consists of a CheckBox and an HTML DIV consisting of a TextBox. The CheckBox has been assigned a JavaScript OnClick event handler.
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" title="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
The HTML Markup consists of a CheckBox and an HTML DIV consisting of a TextBox. The CheckBox has been assigned a jQuery OnClick event handler.
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" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<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
Browser Compatibility
The above code has been tested in the following browsers.
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
Show_Hide_DIV_CheckBox.zip