3 回答

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)} />
}
添加回答
舉報