当 Html 复选框未选中时，有什么方法可以触发 Javascript 中的事件？

Question

一个非常基本的问题，但找不到任何可行的解决方案。 我有这个事件监听器：

div.addEventListener('change', function () {
    const checkBox = event.target
    const checked = checkBox.checked
    let checkBoxName = checkBox.name

    if (checked) {
        for(ii = 0; ii < IdOfLayers.length; ii++) {
            if(checkBoxName == IdOfLayers[ii]) {
                checkBoxName = 0
            }
        }
        IdOfLayers.push(checkBoxName)
    }
    else if (document.getElementById(checkBoxName).checked == false) {
        //remove id from array
        console.log("unchecked triggered")
        for (i = 0; i < IdOfLayers.length; i++) {
            if (checkBoxName == IdOfLayers[i]) {
                x = IdOfLayers.splice(i,1,0)

            }
        }
    }
    console.log(IdOfLayers)
    let result = IdOfLayers.filter(word => word.length > 0)
    IdOfLayers = result
} )

截至目前，它会检测何时选中一个复选框，然后将其添加到已选中复选框的数组中，如果复选框已经存在，它会附加“0”以防止重复。

到目前为止，无论我尝试了什么，我都无法触发取消选中的部分，尝试了许多不同的方法。 如果有任何我想念的简单解决方案，请随时告诉我

编辑：我的复选框是由用户动态创建的，所以我认为我不能简单地包含一个 onclick=stateChanged() function 因为当我尝试时它根本不起作用

Answer 1

尝试用下一种方式实现：

var IdOfLayers = [];
    var checkboxes = document.querySelectorAll("input[type='checkbox']");
    Array.from(checkboxes).map(function(checkbox){
        checkbox.addEventListener('change', function(e) {
            var name = e.target.name;
            
            if(e.target.checked) {
                IdOfLayers.push(e.target.name);
            } else {
                var idx = IdOfLayers.indexOf(name);
                if(idx !== -1) {
                    IdOfLayers.splice(idx, 1);
                }
            }
            console.log(IdOfLayers);
        });
    });

Answer 2

请参阅我对您的问题的评论。 我相信，这就是您所需要的（运行下面的代码片段）：

 const divElement = document.querySelector('#d'); /* A Set is the most efficient structure for adding and removing checkboxes You can always convert this to an array if that is ultimately what you need somewhere else. */ const IdOfLayers = new Set(); divElement.addEventListener('change', function(event) { const checkbox = event.target; const name = checkbox.name; if (checkbox.checked) { IdOfLayers.add(name); } else { IdOfLayers.delete(name); } // for debugging purposes or to convert to an array if that is what you need in the end const myArr = Array.from(IdOfLayers); console.log(myArr); });

 <div id="d"> <label>Checkbox 1 <input type="checkbox" name="c1" value="1"></label> <label>Checkbox 2 <input type="checkbox" name="c2" value="2"></label> <label>Checkbox 3 <input type="checkbox" name="c3" value="3"></label> </div>