動態更改復選框不會觸發onChange？

Question

注意：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);

Answer 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 （全部小寫）

小提琴

---

編輯

我想避免為每個鏈接添加復雜性來檢查此框。
理想情況......我根本不想改變鏈接/點擊邏輯。
我希望能夠在代碼中的任何位置更改.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>

等等

Answer 2

1. 如果要添加更多將觸發復選框的鏈接，請為它們創建類名並使用getElementByClass('classname')
2. 在你的HTML中使用onclick，而不是js。 示例： <div onclick="doSomething()"></div>

3. 只需使用if / else語句進行檢查/取消選中：

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

Answer 3

您可以調用/觸發事件，但它並不像看起來那么容易，尤其是當您必須處理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();
};

Answer 4

我認為jQuery有一個改變事件。 而你並沒有以良好的方式使用它。

閱讀本頁： http ： //api.jquery.com/change/

並且： jQuery復選框更改並單擊事件

當復選框中發生任何更改時，將調用jQuery事件函數。 然后你可以在這個事件函數中寫任何東西