CODEWITHSUNDEEP
javascripthtmlcss
user11247496
user11247496

Reputation:

when checkbox checked value true, display text not displayed

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.

Upvotes: 0

Views: 907

Answers (4)

Deviprasad Sharma
Deviprasad Sharma

Reputation: 536

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

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

Upvotes: 0

Ratan Thapa
Ratan Thapa

Reputation: 95

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>

Upvotes: 1

Orest Borovets
Orest Borovets

Reputation: 106

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

Upvotes: 1

errorau
errorau

Reputation: 2334

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>

Upvotes: 0

Related Questions