Cara menggunakan hide div php

Check whether a checkbox is checked with JavaScript.

Table of Contents

• 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

Example

Checkbox:

Checkbox is CHECKED!

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

  Show me when the checkbox is checked and hide me when the checkbox is unchecked.



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

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

Output

[email protected]