当复选框选中值为真时，不显示显示文本
[英]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.添加了代码片段，当单击运行代码片段时可以看到选中的复选框。
4 个解决方案
解决方案1
1 2020-07-24 14:37:12
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 Wokring 示例只需添加window.onload MDN
解决方案2
1 2020-07-24 14:46:08
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();"> - 第一个选项：调用 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> - 第二个选项：从 <p id="text" style="display:none">Checkbox is CHECKED 中删除样式 css display:none <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>
解决方案3
0 已采纳 2020-07-24 14:35:42
You must delete style="display:none" in text, because you're hiding that directly related element您必须在文本中删除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> <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>
解决方案4
0 2020-07-24 14:38:19
For the p element to be displayed just remove the initial display: none from here对于要显示的p元素，只需从此处删除初始display: none
<p id="text">Checkbox is CHECKED!</p>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.