Html checkbox show hide div

Question

Check whether a checkbox is checked with JavaScript.

Table of Contents Show

Check Whether a Checkbox is Checked
Use the jQuery toggle() method
How do I show and hide div elements using checkboxes?
How do I show and hide input fields based on checkbox?
How do I hide a checkbox in HTML?
Can I add event listener to checkbox?

Display some text when the checkbox is checked:

Checkbox:

Check Whether a Checkbox is Checked

Step 1) Add HTML:

Example

Checkbox: <input type="checkbox" id="myCheck" onclick="myFunction()">

<p id="text" style="display:none">Checkbox is CHECKED!</p>

Step 2) Add JavaScript:

Example

function myFunction() {
// Get the checkbox
var checkBox = document.getElementById("myCheck");
// Get the output text
var text = document.getElementById("text");

// If the checkbox is checked, display the output text
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
}
}

Try it Yourself »

Keywords : Angularjs show hide div on checkbox click example, Angularjs show hide (toggle) div on checkbox selection example, Angularjs toggle (show / hide) elements based on checkbox value example

Example

Result

css Share on :

Here is the code example that can be used to show a div when the checkbox is checked and hide the div when the checkbox is unchecked. We are implementing this functionality using CSS only.

.div_box {
    border: 1px solid #aaa;
    padding: 10px;
    display: none;
}

.checkbox:checked + .div_box {
    display: block;
}

Best JSON Validator, JSON Tree Viewer, JSON Beautifier at same place. Check how cool is the tool

The CSS code can be used to show/hide a div on checkbox check/uncheck. we are using pseudo-class :checked applied on the checkbox to check whether a checkbox is checked or not and using + keyword we are selecting the next HTML element of the input type checkbox that is a div.

Full Code Example

<input type="checkbox" class="checkbox">

<div class="div_box">
  Show me when the checkbox is checked and hide me when the checkbox is unchecked.
</div>

<style>
  .div_box {
    border: 1px solid #aaa;
    padding: 10px;
    display: none;
  }

  .checkbox:checked + .div_box {
    display: block;
  }
</style>

Output

Live Demo

Contribute to this Snippet

Was this helpful?

Created by :

@

Write your Comment

0 Comments

Similar code snippets

Bottom box shadow only to element in CSS
Left side box shadow only in CSS
Create rounded shape style button using CSS
Create skew background using CSS
Change Last element style using CSS
Add image to background using CSS
Create a simple Vertical menu using CSS Example 1

Use the jQuery toggle() method

The following example will demonstrate you how to show and hide div elements based on the selection of checkboxes using the jQuery toggle() method. The div boxes in the example are hidden by default using the CSS display property which value is set to none.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Elements Using Checkboxes</title>
<style>
    .box{
        color: #fff;
        padding: 20px;
        display: none;
        margin-top: 20px;
    }
    .red{ background: #ff0000; }
    .green{ background: #228B22; }
    .blue{ background: #0000ff; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $('input[type="checkbox"]').click(function(){
        var inputValue = $(this).attr("value");
        $("." + inputValue).toggle();
    });
});
</script>
</head>
<body>
    <div>
        <label><input type="checkbox" name="colorCheckbox" value="red"> red</label>
        <label><input type="checkbox" name="colorCheckbox" value="green"> green</label>
        <label><input type="checkbox" name="colorCheckbox" value="blue"> blue</label>
    </div>
    <div class="red box">You have selected <strong>red checkbox</strong> so i am here</div>
    <div class="green box">You have selected <strong>green checkbox</strong> so i am here</div>
    <div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div>
</body>
</html>

</p> <span id="ezoic-pub-ad-placeholder-109"></span><span class="ezoic-ad ezoic-at-0 large-mobile-banner-1 large-mobile-banner-1109 adtester-container adtester-container-109" data-ez-name="laravelcode_com-large-mobile-banner-1"><span id="div-gpt-ad-laravelcode_com-large-mobile-banner-1-0" ezaw="580" ezah="400" style="position:relative;z-index:0;display:inline-block;padding:0;width:100%;max-width:1200px;margin-left:auto!important;margin-right:auto!important;min-height:250px;min-width:300px" class="ezoic-ad"><script data-ezscrex="false" data-cfasync="false" type="text/javascript" style="display:none">if(typeof ez_ad_units != 'undefined'){ez_ad_units.push([[580,400],'laravelcode_com-large-mobile-banner-1','ezslot_2',109,'0','0'])};if(typeof __ez_fad_position != 'undefined'){__ez_fad_position('div-gpt-ad-laravelcode_com-large-mobile-banner-1-0')}; </p></div> </div> <div class="card"> <div class="card-header d-flex align-items-center justify-content-between"> <h6 class="mg-b-0 tx-bold">Author : Harsukh Makwana</h6> </div> <div class="card-body"> <div class="media row"> <div class="col-md-2"> <div class="avatar d-flex align-items-center justify-content-center"> <img src="https://www.laravelcode.com/upload/author.jpg" alt="Harsukh Makwana" class="img-responsive rounded-circle w-100 pull-center"> </div> </div> <div class="col-md-10"> <div class="media-body pd-l-25"> <p class="mg-b-3"> Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on <a target="_blank" href="https://laravelcode.com/cdn-cgi/l/email-protection#147c756667617f7c2625547379757d783a777b79"><span class="__cf_email__" data-cfemail="95fdf4e7e6e0fefda7a4d5f2f8f4fcf9bbf6faf8">[email protected]</span></a> </p> <a href="https://github.com/Harsukh21" class="btn btn-outline-dark btn-icon" target="_blank"> <i class="fab fa-github"></i> </a> <a href="https://www.youtube.com/laravelcode" class="btn btn-outline-danger btn-icon" target="_blank"> <i class="fab fa-youtube"></i> </a> <a href="https://stackoverflow.com/users/4120409/harsukh-makwana" class="btn btn-outline-secondary btn-icon" target="_blank"> <i class="fab fa-stack-overflow"></i> </a> <a href="https://www.facebook.com/Laravelcodedemo/" class="btn btn-outline-primary btn-icon" target="_blank"> <i class="fab fa-facebook"></i> </a> <a href="https://twitter.com/laravelcode" class="btn btn-outline-info btn-icon" target="_blank"> <i class="fab fa-twitter"></i> </a> </div> </div> </div> <span id="ezoic-pub-ad-placeholder-112"></span> </div> </div> </div> <style type="text/css"> .list-group .avatar img { width: inherit; } .gsc-search-button-v2 { padding: 10px 15px; } </style> <div class="col-md-4 mg-t-10 mg-lg-t-0"> <div class="card"> <div class="card-header d-flex align-items-center justify-content-between"> <h6 class="mg-b-0 tx-bold">Search</h6> </div> <div class="card-body"> <script data-cfasync="false">

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 show and hide input fields based on checkbox?

In "On User Input" of the checkbox field script like:.

//change field names accordingly..

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

show Field_Name;.

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

hide Field_Name;.

How do I hide a checkbox in HTML?

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 html