在頁面加載時顯示覆選框狀態

我組裝了一些代碼來檢查複選框的狀態，然後將相應的消息顯示爲一個字符串。複選框的默認狀態是「未選中」，但是當我重新加載頁面時，沒有顯示「未選中」的消息，只要選中複選框並取消選中，它將按預期工作。我希望狀態在頁面加載時簡單顯示，而不是變化。下面的代碼：在頁面加載時顯示覆選框狀態

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

來源

2012-11-03 ejx

您需要一個服務器端腳本語言才能做到這一點。 –

@Asad，你錯了，檢查下面的答案。 –

@Whiteagle我想我誤解了這個問題，但我認爲他希望在重新加載頁面時保留複選框的狀態。如果不存儲信息服務器端，**不能**。 –

你只需要在沉迷中調用你自己的函數來將它設置爲複選框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-03 13:50:30

謝謝，這工作完美！ – ejx

現在你正在運行的功能作爲onchange處理。正如您所看到的那樣，當複選框的狀態發生變化時，就會觸發事件。你說：

我希望狀態在頁面加載顯示，而不是變化。

然後修復應該是相當不錯明顯：的checkbox.onchange更改爲window.onload。

來源

2012-11-03 13:50:20

在頁面加載時顯示覆選框狀態

回答

相關問題