在input.checked=true/false _without_ jQuery上触发一个事件
Fire an event on input.checked=true/false _without_ jQuery
请考虑以下代码 (http://jsfiddle.net/FW36F/1/(:
<input type="checkbox" onchange="alert(this.checked)">
<button onclick="document.getElementsByTagName('input')[0].checked=!document.getElementsByTagName('input')[0].checked;">toggle</button>
如果单击该复选框,则会收到一条提醒,告知您是否选中了该复选框。 伟大。 但是,如果单击切换按钮,复选框会更改其选中状态,但不会触发 onchange 事件。
从本质上讲,复选框的 onchange 仅在用户实际单击复选框时触发,而不是在通过 JavaScript 更改复选框时触发。 在IE,FF和Chrome中也是如此。 看来这种行为也是规范的。
但是,如果出于任何原因复选框的选中状态发生变化,我确实需要触发某种事件。 这可能吗?
哦,是的,jQuery是不允许的。 并且请不要设置超时/设置间隔的解决方案...
更新:另外,我应该明确指出,上面的代码仅用于说明。 在实际代码中,我们需要确保复选框的状态被选中或取消选中 - 而不仅仅是切换它。 也许这将是更好的代码来说明这一点:
<input type="checkbox" onchange="alert(this.checked)">
<button onclick="document.getElementsByTagName('input')[0].checked=true;">check</button>
<button onclick="document.getElementsByTagName('input')[0].checked=false;">un check</button>
此外,在其他领域可能存在我们无法完全控制的代码,这可能会做一个简单的.checked=true/false——我们想确保我们也看到这一点。
现有答案工作正常,即使您进行更新也是如此。 只要聪明一点,如果不需要,不要调用点击。另外,请不要使用内联 JS。这在10年前是可以的。
<input type="checkbox" onchange="alert(this.checked)">
<button id='check'>check</button>
<button id='uncheck'>uncheck</button>
document.getElementById('check').onclick = function() {
if (!this.checked) {
this.click();
}
}
如果需要在脚本更改值时进行修改,在 Firefox 中,您可以使用 https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/watch
这里的例子 http://jsfiddle.net/PPuZ8/
// In FF $ is a shortcut for document.getElementById
// It doesn't fire when set from the UI, you have to use a regular handler for that
$('cb').watch("checked", function(){
console.log('Checked state changed from script', arguments);
return true;
});
对于IE,您可以使用onpropertychange
http://msdn.microsoft.com/en-us/library/ie/ms536956(v=vs.85(.aspx (感谢 jiving 的提醒(
示例:http://jsfiddle.net/PPuZ8/1/
document.getElementById('cb').onpropertychange = function() {
if (event.propertyName == 'checked') {
console.log('Checked state changed onproperty change');
}
};
对于其他浏览器,您必须使用 setInterval/setTimeout 轮询
让切换按钮实际单击复选框:
<input type="checkbox" onchange="alert(this.checked)">
<button onclick="document.getElementsByTagName('input')[0].click()">
toggle
</button>
如果您希望对复选框进行任何更改以通知您其新位置,那么我将创建一个全局方法来更改复选框的值,并将其作为代理处理:
<script>
function toggleCB( state ) {
var cb = document.getElementById("cb");
arguments.length ? cb.checked = state : cb.click() ;
return cb.checked;
}
</script>
<input id="cb" type="checkbox" />
<input type="button" onClick="alert( toggleCB(true) )" value="Check" />
<input type="button" onClick="alert( toggleCB(false) )" value="Uncheck" />
<input type="button" onClick="alert( toggleCB() )" value="Toggle" />
现在,无论何时设置或切换复选框,您都会恢复选中状态。
最后一件事,我会避免使用 onClick
属性,而是从您的 JavaScript 中绑定点击事件。
使用 click()
<button onclick="document.getElementsByTagName('input')[0].checked=!document.getElementsByTagName('input')[0].click();">toggle</button>
oninput 是您需要处理的事件...https://developer.mozilla.org/en/DOM/DOM_event_reference/input
- 使用类从一个标记中双击事件
- 如何在elfinder插件(一个文件管理器插件)上获得上传前事件
- 导航到特定事件的另一个变量页面
- 来自文档或下一个静态父级的事件委派
- 在创建对象后附加一个jquery事件
- 将添加一个相同类型的事件附加或覆盖以前添加的具有相同名称的事件
- 如何在所有ng点击事件AngularJS上启动一个方法
- 是否<asp:文本框>有一个onFocusLost事件
- React应用程序:道具在下一个事件后更新
- 在Angular ui路由器中,如何将事件从一个视图发送到另一个视图
- 如何从另一个处理程序内部取消JavaScript事件处理程序函数的执行
- 算法:从数组(javascript/angular)中按当前日期获取上一个和下一个事件
- 如何向onClick事件处理程序传递一个接受参数的函数,并且仍然将该函数绑定到组件's”;这个“;上下文
- 全局屏幕span onclick触发一个事件javascript
- 事件循环的MEAN.JS setInterval进程(从另一个服务器获取数据)
- 添加一个javascript函数来下载elfinder上的事件
- jQuery触发器事件在一个循环中多次出现
- 'mousemove'画布中的事件侦听器-指针仅在最后一个矩形中更改
- 是否可以同时为一个元素的所有事件指定阻止默认值
- angularjs调用事件中控制器的一个函数