0

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

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

2 回答 2

1

现在，您正在将函数作为onchange处理程序运行。如您所见，这是当复选框状态更改时触发的事件。你说：

简而言之，我希望状态在页面加载时显示，而不是在更改时显示。

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

于 2012-11-03T13:50:20.307 回答
1

您只需要调用自己的函数即可将其设置为复选框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>
于 2012-11-03T13:50:30.143 回答