动态更改复选框不会触发 onChange？

Posted 2023-03-05

【中文标题】动态更改复选框不会触发 onChange？

【英文标题】：Dynamically changing a checkbox doesn't trigger onChange?

【发布时间】：2014-09-24 19:58:53

【问题描述】：

注意：jQuery 不是一个选项。

我想检测复选框状态的变化，但执行此操作时似乎不会触发 onChange 事件：

document.getElementById('myCheckBox').addEventListener('change',function() 
    console.log('Changed!');
);
document.getElementById('someLink').onClick = function() 
    // toggle checkbox
    document.getElementById('myCheckBox').checked = !document.getElementById('myCheckBox').checked;
;

当我单击#someLink 时，不会触发更改事件。我可以向#myLink 添加另一个侦听器，但是如果我添加选中同一框的其他链接，我必须添加更多侦听器。我想要一个复选框更改事件的侦听器。同样，jQuery 不是一个选项，我需要 vanilla JS。

编辑：对不起，如果我没有更清楚地说明这一点，但我想避免为每个要选中此框的链接增加复杂性。所以理想情况下（也许答案是这是不可能的）我根本不想改变链接/点击逻辑。我希望能够在代码中的任何位置更改 .checked 属性，并在每次更改时无需附加逻辑即可检测到它（如果可能的话）。

更新：

好吧，如果不改变 onClick 逻辑，显然没有办法很好地做到这一点，所以（就像某种动物一样）我最终暴力破解了这个问题，如下所示：

function mySentinel() 
    if(document.getElementById('myCheckBox').checked) 
        console.log("I've been checked!");
        return;
    
    setTimeout("mySentinel()",100);

// then call this somewhere in the on document load section...
mySentinel();

如果需要，您也可以添加某种超时：

function mySentinel(var i) 
    if(document.getElementById('myCheckBox').checked) 
        console.log("I've been checked!");
        return;
    
    if(i <= 0) 
        console.log("Time out. Still not checked");
    
    i--;
    setTimeout("mySentinel("+i+")",100);

// then call this somewhere in the on document load section...
// 60 second timeout (some math can make the argument look nicer)
mySentinel(600);

【参考方案1】：

没错，以编程方式更改输入的值或检查状态不会触发事件处理程序。

您还必须使用 javascript 触发事件

document.getElementById('myCheckBox').addEventListener('change',function() 
    console.log('Changed!');
);

document.getElementById('someLink').onclick = function() 
    var box = document.getElementById('myCheckBox')
    box.checked = !box.checked;

    if ("createEvent" in document) 
        var evt = document.createEvent("htmlEvents");
        evt.initEvent("change", false, true);
        box.dispatchEvent(evt);
     else 
        box.fireEvent("onchange");
    
;

注意是onclick（全部小写）

FIDDLE

---

编辑

我想避免为选中此框的每个链接增加复杂性。 所以理想情况下......我根本不想改变链接/点击逻辑。 我希望能够在代码中的任何位置更改 .checked 属性，并在每次更改时无需附加逻辑即可检测到它（如果可能的话）。

如果不使用带有间隔等的可怕技巧，这实际上是不可能的。 当以编程方式更改检查状态时，根本不会触发事件处理程序，因为在大多数情况下这确实是一个大问题，并且在相反的情况下更难解决，您只需手动触发事件处理程序，并且这确实是唯一的方法。

当然，你可以使用类和外部函数等来方便很多

document.getElementById('myCheckBox').addEventListener('change',function() 
    console.log('Changed!');
);

var links = document.querySelectorAll('.someLinkClass');

for (var i = links.length; i--;) 
    links[i].addEventListener('click', triggerChange, false);



function triggerChange() 
    var box = document.getElementById('myCheckBox')
    box.checked = !box.checked;

    if ("createEvent" in document) 
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent("change", false, true);
        box.dispatchEvent(evt);
     else 
        box.fireEvent("onchange");
    
;

无论何时添加链接，您只需添加该类

<a href="#" class="someLinkClass">Change the checkbox</a>
<a href="#" class="someLinkClass">Change the checkbox again</a>
<a href="#" class="someLinkClass">Change the checkbox even more</a>

等等

【参考方案2】：

如果您想添加更多将触发复选框的链接，请为它们创建一个类名并使用getElementByClass('classname') 在 html 中使用 onclick，而不是 js。示例：<div onclick="doSomething()"></div>

只需使用 if/else 语句进行检查/取消检查：

if(document.getElementById('myCheck').checked)document.getElementById("myCheck").checked = false; elsedocument.getElementById("myCheck").checked = true;

【讨论】：

我喜欢为每个链接添加一个类的想法。这可能是迄今为止最干净的解决方案。它确实为每个链接增加了一些复杂性，但它非常小。

您可以在一个对象上使用多个类，因此一个类可以专用于样式，另一个用于功能。例如：<div class="class1 class2"></div>@user439299

【参考方案3】：

我认为 jQuery 有一个更改事件。而且你没有很好地使用它。

阅读本页：http://api.jquery.com/change/

还有这个：jQuery checkbox change and click event

当复选框发生任何变化时，将调用 jQuery 事件函数。然后你可以在这个事件函数中写任何东西

【参考方案4】：

您可以调用/触发一个事件，但它并不像看起来那么容易，尤其是当您必须与 Internet Explorer 打交道时。

最干净的解决方案是将您的事件放入自己的函数中，然后在需要的地方调用它。

function handleEvent()
    console.log('Changed!');


documentent.getElementById('myCheckBox').addEventListener('change',function() 
    handleEvent()
);
document.getElementById('someLink').onClick = function() 
    // toggle checkbox
    document.getElementById('myCheckBox').checked = !document.getElementById('myCheckBox').checked;
    handleEvent();
;