在input.checked = true/false _without_ jQuery上触发一个事件

Question

请考虑以下代码(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是不允许的.请不要基于setTimeout/setInterval的解决方案......

更新:此外,我应该说清楚上面的代码仅用于说明.在实际代码中,我们需要确保选中或取消选中复选框的状态 - 而不仅仅是切换它.也许这将是更好的代码来说明:

<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 - 我们也希望确保我们也能看到它.

Answer 1

即使您的更新,现有的答案也可以正常工作.只是要聪明一点,如果你不需要,不要打电话.另外,请不要使用内联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(感谢jivings提醒)

示例:http://jsfiddle.net/PPuZ8/1/

document.getElementById('cb').onpropertychange = function() {    
    if (event.propertyName == 'checked') {
       console.log('Checked state changed onproperty change');    
    }
};

对于其他浏览器,您必须使用setInterval/setTimeout进行轮询