11

考虑以下代码（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 —— 我们希望确保我们也能看到这一点。

4

4 回答 4

10

即使使用您的update，现有答案也可以正常工作。只是要聪明一点，如果不需要，不要调用 click 。另外，请不要使用内联 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 进行轮询

于 2012-05-17T14:46:09.513 回答
2

让切换按钮实际单击复选框：

<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 中绑定点击事件。

于 2012-05-17T14:38:23.677 回答
1

采用click()

<button onclick="document.getElementsByTagName('input')[0].checked=!document.getElementsByTagName('input')[0].click();">toggle</button>
于 2012-05-17T14:38:15.223 回答
-1

oninput 是您需要处理的事件... https://developer.mozilla.org/en/DOM/DOM_event_reference/input

于 2012-05-17T14:46:54.017 回答