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.
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
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP