如何让Checkbox自动勾选并在勾选时自动显示对应结果

要让你的Checkbox在页面加载时自动勾选，同时同步显示对应文本，只需要做两处简单修改：

1. 给Checkbox添加checked属性，设置默认勾选状态
2. 页面加载完成后自动执行状态同步函数，确保文本正常显示

修改后的完整代码 #

<!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>

<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";
  }
}

// 页面加载时自动执行函数，同步初始状态
myFunction();
</script>

</body>
</html>

修改说明 #

• 在<input>标签中添加checked属性，这是HTML原生属性，能让Checkbox在页面加载完成时直接处于勾选状态
• 在脚本末尾调用myFunction()，确保页面加载后立刻执行一次状态判断，把对应的文本显示出来，无需用户手动触发点击事件

内容的提问来源于stack exchange，提问作者bricas30