在input.checked = true / false _without_ jQuery上触发事件 [英] Fire an event on input.checked=true/false _without_ jQuery

问题描述

考虑下面的代码（ http://jsfiddle.net/FW36F/1/ ）：

 < input type =checkboxonchange =alert（this.checked）> 
< button onclick =document.getElementsByTagName（'input'）[0] .checked =！document.getElementsByTagName（'input'）[0] .checked;> toggle< / button> 
  

如果您点击复选框，您会收到一条警告，告诉您它是否被选中。大。但是，如果您单击切换按钮，则该复选框将更改它的选中状态，但不会触发onchange事件。

实质上，只有当用户实际点击复选框时，复选框的onchange才会触发，如果通过JavaScript更改复选框，则不会触发 。在IE，FF和Chrome中都是如此。看来，这种行为也适用于规范。

然而，如果出于任何原因，我确实需要某种事件触发复选框的选中状态更改。这是可能的吗？

噢，并且 jQuery不允许。并且请不要使用基于setTimeout / setInterval的解决方案......

更新：另外，我应该清楚说明上面的代码是为了说明只要。在真实代码中，我们需要确保复选框的状态被选中或不选中 - 而不仅仅是切换它。也许这是更好的代码来说明：

 < input type =checkboxonchange =alert（this.checked ）> 
< button onclick =document.getElementsByTagName（'input'）[0] .checked = true;> check< / button> 
< button onclick =document.getElementsByTagName（'input'）[0] .checked = false;>取消选中< / button> 
  

此外，在其他方面可能存在我们无法完全控制的代码，这可能会简单.checked = true / false - 我们希望确保我们也能看到这一点。 解决方案

很好，即使是你的更新。如果你不需要的话，请小心点，不要打电话。另外，请不要使用内联JS。

 < input type =checkboxonchange =alert（this.checked）> ; 
< button id ='check'>检查< /按钮> 
< button id ='uncheck'>取消勾选< / button> 
 $ b $ document.getElementById（'check'）。onclick = function（）{
 if（！this.checked）{
 this.click（）; 
 
 
 
 
 $ b 
如果脚本更改时需要修改，值，在Firefox中，您可以使用 https://developer.mozilla.org / en / JavaScript / Reference / Global_Objects / Object / watch  
 
 
 
示例 http://jsfiddle.net/PPuZ8/  
  //在FF $中是一个document.getElementById 
的快捷方式//当从UI设置时，它不会触发，您必须为该
 $（'cb'）使用常规处理程序。watch（checked，function ）{
 console.log（'Checked state changed from script'，arguments）; 
 return true; 
}）; 
  
对于IE，您可以使用 onpropertychange   http://msdn.microsoft.com/en- 
 
 
 
示例： http://jsfiddle.net/PPuZ8/1/  
 document.getElementById（'cb'）。onpropertychange = function（）{
 if（event.propertyName =='checked'）{
 console.log（'Checked状态更改属性更改'）; 
} 
}; 
  
对于其他浏览器，您必须使用setInterval / setTimeout进行轮询
 
Consider the following code (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>
If you click the checkbox, you get an alert telling you if it's checked or not.  Great.  However, if you click the toggle button, the checkbox changes it's checked state but the onchange event is NOT fired.  

Essentially, the onchange for a checkbox only fires if the user actually clicks the checkbox, not if the checkbox is changed via JavaScript.  This is be true in IE, FF, and Chrome.  It appears that this behavior is to specification also.

However, I really need some kind of event to fire if, for any reason, the checkbox's checked state changes.  Is this possible?

Oh yeah, and jQuery is not allowed.  And please no setTimeout/setInterval based solutions either...

Update: Also, I should make it clear that the code above is for illustration only.  In the real code, we need to ensure the state of the checkbox is checked or unchecked -- not just toggle it.  Perhaps this would be better code to illustrate that:
<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>
Moreover, there may be code in other areas we don't fully control, which might do a simple .checked=true/false -- we'd like to make sure we see that also.
解决方案
The existing answers work just fine, even with your update.  Just be smart about it and don't call click if you don't need to. Also, please don't use inline JS. That was OK 10 years ago.
<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();
   }
}
If you need to be modified  when a script changes the value, in Firefox, you can use https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/watch

Example here 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;
});
For IE you can use onpropertychange http://msdn.microsoft.com/en-us/library/ie/ms536956(v=vs.85).aspx  (Thanks to jivings for the reminder)

Example: http://jsfiddle.net/PPuZ8/1/
document.getElementById('cb').onpropertychange = function() {    
    if (event.propertyName == 'checked') {
       console.log('Checked state changed onproperty change');    
    }
};
For other browsers, you have to poll using setInterval/setTimeout

                        
这篇关于在input.checked = true / false _without_ jQuery上触发事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！