TransWikia.com

when checkbox checked value true, display text not displayed

Stack Overflow Asked by user11247496 on December 30, 2021

Hello I can’t see text when checked value true. How can open default this area?

Important!
When checkbox checked, text must be visible!!

<!DOCTYPE html>
<html>
<body>

<p>Display some text when the checkbox is checked:</p>

<label for="myCheck">Checkbox:</label> 
<input type="checkbox" id="myCheck" onclick="myFunction()" checked="true"> <!-- checked value true -->

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

<script>
function myFunction() {
  var checkBox = document.getElementById("myCheck");
  var text = document.getElementById("text");
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
     text.style.display = "none";
  }
}
</script>

</body>
</html>

added code snippet, when click run code snippet can see checked checkbox.

4 Answers

if i am correct you are trying to display the text on body load when the check box is already checked.

- first option: call the function myFunction() on body load <body onload="myFunction();">

<!DOCTYPE html>
<html>
<body onload="myFunction()">

<p>Display some text when the checkbox is checked:</p>

<label for="myCheck">Checkbox:</label> 
<input type="checkbox" id="myCheck" onclick="myFunction()" checked="true"> <!-- checked value true -->

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

<script>
function myFunction() {
  var checkBox = document.getElementById("myCheck");
  var text = document.getElementById("text");
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
     text.style.display = "none";
  }
}
</script>

</body>
</html>

- second option: remove the style css display:none from <p id="text" style="display:none">Checkbox is CHECKED!</p>

function myFunction() {
  var checkBox = document.getElementById("myCheck");
  var text = document.getElementById("text");
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
     text.style.display = "none";
  }
}
<!DOCTYPE html>
<html>
<body>

<p>Display some text when the checkbox is checked:</p>

<label for="myCheck">Checkbox:</label> 
<input type="checkbox" id="myCheck" onclick="myFunction()" checked="true"> <!-- checked value true -->

<p id="text">Checkbox is CHECKED!</p>


</body>
</html>

Answered by Ratan Thapa on December 30, 2021

For the p element to be displayed just remove the initial display: none from here

<p id="text">Checkbox is CHECKED!</p>

Answered by Deviprasad Sharma on December 30, 2021

Display some text when the checkbox is checked:

<label for="myCheck">Checkbox:</label>
<input type="checkbox" id="myCheck" onclick="myFunction()" checked="true" />
<!-- checked value true -->

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

<script>
  function myFunction() {
    var checkBox = document.getElementById("myCheck");
    var text = document.getElementById("text");
    if (checkBox.checked == true) {
      text.style.display = "block";
    } else {
      text.style.display = "none";
    }
  }
  window.onload = () => {
    myFunction();
  };
</script>

Wokring example Just add window.onload MDN

Answered by Orest Borovets on December 30, 2021

You must delete style="display:none" in text, because you're hiding that directly related element

<!DOCTYPE html>
<html>
<body>

<p>Display some text when the checkbox is checked:</p>

<label for="myCheck">Checkbox:</label> 
<input type="checkbox" id="myCheck" onclick="myFunction()" checked="true"> <!-- checked value true -->

<p id="text" >Checkbox is CHECKED!</p>

<script>
function myFunction() {
  var checkBox = document.getElementById("myCheck");
  var text = document.getElementById("text");
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
     text.style.display = "none";
  }
}
</script>

</body>
</html>

Answered by errorau on December 30, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP