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

Fire an event on input.checked=true/false _without_ jQuery

本文关键字：事件 一个 jQuery checked input true without false      更新时间：2023-09-26

请考虑以下代码 (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

相关文章：