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

Dynamically changing a checkbox doesn't trigger onChange?

本文关键字：onChange 复选框 动态      更新时间：2023-09-26

注意: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;
};

当我点击# someelink时，更改事件不会被触发。我可以在#myLink中添加另一个监听器，但是如果我添加其他链接，我必须添加更多的监听器。我想要一个用于复选框更改事件的侦听器。同样，jQuery不是一个选择，我需要的是普通的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);

这是正确的，以编程方式更改输入的值或选中状态不会触发事件处理程序。

你还必须用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(全小写)

小提琴

编辑

我想避免给每个选中此框的链接增加复杂性。
所以理想情况下……我根本不想改变链接/点击逻辑。
我希望能够在代码中的任何地方更改.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>

等。

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

  2. 只需使用if/else语句来检查/取消检查:

    if(document.getElementById('myCheck').checked){document.getElementById("myCheck").checked = false;} else{document.getElementById("myCheck").checked = true;}

我认为jQuery有一个变化事件。而且你没有好好利用它。

阅读此页:http://api.jquery.com/change/

和this: jQuery复选框更改和点击事件

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

中写入任何内容

你可以调用/触发一个事件，但它并不像看起来那么容易，特别是当你必须处理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();
};
相关文章：