从onclick / onchange事件获取HTML Checkbox的价值

<input type="checkbox" onclick="onClickHandler()" onchange="onChangeHandler()" />

从内部onClickHandler和/或onChangeHandler,我如何确定复选框的新状态?


慕码人8056858
浏览 1478回答 3
3回答

胡说叔叔

简短的答案:使用该click事件,直到值更新后才会触发,并在您希望它触发时触发:<label><input type='checkbox' onclick='handleClick(this);'>Checkbox</label>function handleClick(cb) {&nbsp; 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) {&nbsp; setTimeout(function() {&nbsp; &nbsp; display("Clicked, new value = " + cb.checked);&nbsp; }, 0);}目的似乎是让点击完成后再查看价值。据我所知,没有理由这样做,我也不知道为什么要这么做。在click调用处理程序之前,将更改该值。实际上,规范对此非常清楚。没有setTimeout尝试的版本在我尝试过的每个浏览器(甚至是IE6)中都可以很好地运行。我只能假设我正在考虑其他一些直到事件发生后才进行更改的平台。无论如何,没有理由使用HTML复选框来做到这一点。

慕村9548890

用这个<input type="checkbox" onclick="onClickHandler()" id="box" /><script>function onClickHandler(){&nbsp; &nbsp; var chk=document.getElementById("box").value;&nbsp; &nbsp; //use this value}</script>

Smart猫小萌

对于React.js,您可以使用更具可读性的代码来实现。希望能帮助到你。handleCheckboxChange(e) {&nbsp; console.log('value of checkbox : ', e.target.checked);}render() {&nbsp; return <input type="checkbox" onChange={this.handleCheckboxChange.bind(this)} />}
打开App,查看更多内容
随时随地看视频慕课网APP