Show hide with checkbox javascript

Question

I need a page with checkboxes and visible div if at minimum 1 is checked.

Table of Contents Show

How do I show and hide input fields based on checkbox?
How do I show and hide div elements using checkboxes?
How do I hide a checkbox?
Can I add event listener to checkbox?

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" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="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.

function ShowHideDiv(chkPassport) {

var dvPassport = document.getElementById("dvPassport");

dvPassport.style.display = chkPassport.checked ? "block" : "none";

}

</script>

Do you have Passport?

</label>

<hr />

Passport Number:

</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.

$(function () {

$("#chkPassport").click(function () {

if ($(this).is(":checked")) {

$("#dvPassport").show();

} else {

$("#dvPassport").hide();

}

});

</script>

Do you have Passport?

</label>

<hr />

Passport Number:

</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

How do I show and hide input fields based on checkbox?

First, when a user tries to select more than one option from the checkbox, none of the hidden fields that should be revealed are shown..

//change field names accordingly..

if input. CheckBox. contains("Choice 1").

show Field_Name;.

else if ! input. ... .

hide Field_Name;.

How do I show and hide div elements using checkboxes?

Approach:.

Selector name for checkbox is same as the element which is used to display the. content..

CSS display property of each element is set to none using display: none; for hiding the element initially..

Use . toggle() method for displaying and hiding the element for checking and unchecking the box..

How do I hide a checkbox?

There are several ways to hide the <input type="checkbox"> :.

Use display: none..

Use visibility: hidden..

Use opacity: 0..

Position it off the screen using position: absolute and an insanely big value like left: -9999px..

Can I add event listener to checkbox?

To add a checkbox check event listener with JavaScript, we can listen for the change event. to add a checkbox. const checkbox = document. querySelector("input[name=checkbox]"); checkbox.

kode javascript JavaScript checkbox checked jQuery checkbox checked Multiple checkbox JavaScript Checkbox on change