动态更改复选框不会触发onChange？ [英] Dynamically changing a checkbox doesn't trigger onChange?

问题描述

注意：jQuery不是一个选项。

Note: jQuery is not an option.

我想检测复选框状态的变化，但onChange事件似乎并没有触发我这样做：

I want to detect a change in the state of a checkbox, but the onChange event doesn't seem to fire when I do this:

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。

When I click #someLink the change event is not fired. I could add another listener to #myLink, but then if I add other links that check the same box I have to add more listeners. I want one listener for a checkbox change event. Again, jQuery is not an option, I need vanilla JS.

编辑：对不起，如果我没有使这更清楚，但我想避免增加复杂性每个链接将选中此框。所以理想（或许答案是这是不可能的）我不想改变链接/点击逻辑。我希望能够在代码中的任何位置更改.checked属性，并且在每次更改时都可以检测到它（如果可能），而不需要额外的逻辑。

Sorry if I did not make this more clear, but I want to avoid adding complexity to each link that will check this box. So ideally (and maybe the answer is that this is impossible) I don't want to have to alter the link/click logic at all. I want to be able to change the .checked property anywhere in the code and have it be detected without additional logic at each change (if possible).

UPDATE ：

UPDATE:

好吧，所以很显然没有办法做到这一点，而不改变onClick逻辑，所以（像某种动物），我结束了暴力强迫问题如下：

Okay so there is apparently no way to do this nicely without altering the onClick logic, so (like some kind of animal) I ended up brute forcing the problem as follows:

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();

如果您还想要添加某种类型的超时：

You can add some sort of timeout if you want also:

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);

推荐答案

这是正确的，更改值或检查状态

That is correct, changing the value or checked state of an input programatically does not fire the event handlers.

您必须使用javascript触发事件

You'll have to trigger the event as well with 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

EDIT

我想避免为每个将检查此框的链接添加复杂性。

所以，理想情况下...我不想改变链接/点击逻辑。

我希望能够在代码中的任何位置更改.checked属性，并且在每次更改时都可以在没有其他逻辑的情况下检测。

I want to avoid adding complexity to each link that will check this box.
So ideally ... I don't want to have to alter the link/click logic at all.
I want to be able to change the .checked property anywhere in the code and have it be detected without additional logic at each change (if possible).

这是不可能的，没有使用可怕的黑客与间隔等
当检查状态改变程序，事件处理程序不会被触发，因为这将真的在大多数情况下是一个巨大的问题，并且很难在相反的情况下工作，你只是手动触发事件处理程序，这是真正的唯一方法。

And that's not really possible, without using horrible hacks with intervals etc. When the checked state is changed programatically the event handler isn't triggered at all, because that would really be a huge issue in most cases, and much harder to work around the opposite scenario, where you just trigger the event handler manually instead, and that is really the only way to do it.

当然，你可以使用类和外部函数更方便，如

Of course, you can make it a lot more convenient using classes and external function and such

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");
    }
};

并且每当您添加链接时，只需添加该类

and anytime you add a link, you just add that class

<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>

等。

这篇关于动态更改复选框不会触发onChange？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！