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