Question

我组装了一些代码来检查复选框的状态，然后将相应的消息显示为字符串。复选框的默认状态为“未选中”，但是当我重新加载页面时，没有显示“未选中”的消息，一旦我选中复选框并取消选中，它将按预期工作。我希望状态显示在页面加载上，而不是改变。这是代码：

<html>
<head>
</head>
<body>

<input type="checkbox" id="checkBox" />
<div id="text"></div>

<script type="text/javascript">
var getId = document.getElementById('text'),
    checkbox = document.getElementById('checkBox');

function checkState(){
    text.innerHTML = checkbox.checked ? "Checkbox is checked" : "Checkbox is empty";
}
checkbox.onchange = checkState;
</script>

</body>
</html>

Answer 1

现在您正在以onchange处理程序运行该函数。正如您所看到的那样，当复选框的状态发生变化时，就会触发该事件。你说：

我希望状态在页面加载时显示，而不是在变化。

然后修复应该非常明显：将checkbox.onchange更改为window.onload。

Answer 2

您只需要在成瘾中调用自己的函数，将其设置为复选框onchange事件。

由于您在正文末尾执行脚本，因此只有在您已经访问DOM时才会执行该脚本，您只需在定义后调用checkState()即可。

<html>
<head>
</head>
<body>

<input type="checkbox" id="checkBox" />
<div id="text"></div>

<script type="text/javascript">
var getId = document.getElementById('text'),
    checkbox = document.getElementById('checkBox');

function checkState(){
    text.innerHTML = checkbox.checked ? "Checkbox is checked" : "Checkbox is empty";
}
checkbox.onchange = checkState;
checkState();
</script>

</body>
</html>

在页面加载时显示复选框状态

2 个答案: