TA貢獻1804條經驗 獲得超8個贊
簡短的答案：
使用該click事件，直到值更新后才會觸發，并在您希望它觸發時觸發：
<label><input type='checkbox' onclick='handleClick(this);'>Checkbox</label>
function handleClick(cb) {
display("Clicked, new value = " + cb.checked);
}
更長的答案：
該change事件處理函數不是調用，直到checked狀態已經更新（活生生的例子 | 源），但因為（蒂姆·布泰在評論中指出）IE不火change，直到選框失去焦點的事件，你沒有得到主動通知。更糟的是，與IE瀏覽器，如果你點擊一個標簽的復選框（而不是復選框本身）進行更新，你可以得到的印象是，你得到的舊值（用IE試試在這里通過點擊標簽：活生生的例子 | 來源）。這是因為如果復選框具有焦點，則單擊標簽會將焦點移離它，change并使用舊值觸發事件，然后單擊click設置新值并將焦點重新設置在復選框上。很混亂。
但是，如果您click改為使用，則可以避免所有這些不愉快之處。
我使用了DOM0處理程序（onxyz屬性），因為這是您所要的，但為記錄起見，我通常建議在代碼（DOM2 addEventListener或attachEventIE的較早版本）中掛接處理程序，而不要使用onxyz屬性。這樣就可以將多個處理程序附加到同一元素，并避免使所有處理程序成為全局函數。
此答案的較早版本將此代碼用于handleClick：
function handleClick(cb) {
setTimeout(function() {
display("Clicked, new value = " + cb.checked);
}, 0);
}
目的似乎是讓點擊完成后再查看價值。據我所知，沒有理由這樣做，我也不知道為什么要這么做。在click調用處理程序之前，將更改該值。實際上，規范對此非常清楚。沒有setTimeout嘗試的版本在我嘗試過的每個瀏覽器（甚至是IE6）中都可以很好地運行。我只能假設我正在考慮其他一些直到事件發生后才進行更改的平臺。無論如何，沒有理由使用HTML復選框來做到這一點。
TA貢獻1884條經驗 獲得超4個贊
用這個
<input type="checkbox" onclick="onClickHandler()" id="box" />
<script>
function onClickHandler(){
var chk=document.getElementById("box").value;
//use this value
}
</script>
TA貢獻1911條經驗 獲得超7個贊
對于React.js，您可以使用更具可讀性的代碼來實現。希望能幫助到你。
handleCheckboxChange(e) {
console.log('value of checkbox : ', e.target.checked);
}
render() {
return <input type="checkbox" onChange={this.handleCheckboxChange.bind(this)} />
}
舉報