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 に答える