动态更改复选框不会触发 onChange 事件吗？
动态更改复选框不会触发 onChange 事件吗？
注意：jQuery不是一个选项。\n我想要检测复选框状态的变化，但是当我这样做时，onChange事件似乎不会触发：\n
document.getElementById('myCheckBox').addEventListener('change',function() {
console.log('变化了！');
});
document.getElementById('someLink').onClick = function() {
// 切换复选框
document.getElementById('myCheckBox').checked = !document.getElementById('myCheckBox').checked;
};
\n当我点击#someLink时，change事件不会触发。我可以在#myLink上添加另一个监听器，但是如果我添加其他检查同一个复选框的链接，我就必须添加更多的监听器。我想要一个监听复选框变化事件的监听器。再次强调，jQuery不是一个选项，我需要原生JS。\n编辑：如果我没有表达清楚，对不起，但是我想要避免在每个将检查此复选框的链接上添加复杂性。所以理想情况下（也许答案是不可能的），我不想在所有更改的地方都要添加额外的逻辑，我希望能够在代码的任何地方更改.checked属性并且能够被检测到（如果可能的话）。\n更新：\n好吧，显然没有办法在不改变onClick逻辑的情况下优雅地解决这个问题，所以（像某种动物一样），我最终通过以下方式强制解决了问题：\n
function mySentinel() {
if(document.getElementById('myCheckBox').checked) {
console.log("我被选中了！");
return;
}
setTimeout("mySentinel()",100);
}
// 然后在文档加载部分的某个地方调用这个函数...
mySentinel();
\n如果你想的话还可以添加一些超时：\n
function mySentinel(var i) {
if(document.getElementById('myCheckBox').checked) {
console.log("我被选中了！");
return;
}
if(i <= 0) {
console.log("超时。仍然没有被选中");
}
i--;
setTimeout("mySentinel("+i+")",100);
}
// 然后在文档加载部分的某个地方调用这个函数...
// 60秒超时（一些数学可以使参数看起来更好）
mySentinel(600);
问题的原因：
问题出现的原因是在使用jQuery的change事件时，没有正确使用该事件。
解决方法：
根据参考链接中的文档和相关的问题，可以通过以下方法解决该问题：
1. 确保正确绑定change事件：
- 使用正确的选择器，找到目标复选框元素。
- 使用.on()方法来绑定change事件。
2. 在change事件处理函数中编写所需的逻辑代码。
下面是一个使用jQuery的change事件的示例代码：
$(document).ready(function() {
// 使用.on()方法绑定change事件
$('#checkbox').on('change', function() {
// 在change事件处理函数中编写逻辑代码
if ($(this).is(':checked')) {
// 当复选框被选中时执行的代码
console.log('Checkbox is checked');
} else {
// 当复选框取消选中时执行的代码
console.log('Checkbox is unchecked');
}
});
});
以上代码会在复选框的状态发生改变时触发change事件，并在控制台输出相应的信息。你可以根据需求在change事件处理函数中编写自己的代码。
参考链接：
动态更改复选框不会触发onChange事件的原因可能是因为没有正确设置事件监听器。解决方法是在HTML中使用onclick属性来触发相应的函数。下面的代码展示了如何使用if/else语句来实现复选框的选中和取消选中操作：
if(document.getElementById('myCheck').checked){
document.getElementById("myCheck").checked = false;
} else{
document.getElementById("myCheck").checked = true;
}
另一个解决方法是为每个链接添加一个class，并使用getElementByClass('classname')方法来选取这些链接。这样做可以使代码更加整洁，但会给每个链接添加一些复杂性。同时，一个对象可以使用多个class，其中一个用于样式，另一个用于功能。例如：
通过正确设置事件监听器和使用if/else语句或添加class来动态更改复选框的选中状态，可以解决不触发onChange事件的问题。
动态更改复选框不会触发onChange事件的原因是，通过编程方式更改输入的值或选中状态不会触发事件处理程序。需要使用JavaScript手动触发事件。
解决方法是，在代码中使用document.getElementById()获取到复选框元素，并添加事件监听器，当复选框的状态发生变化时，触发change事件。同时，通过if语句判断浏览器是否支持createEvent方法，如果支持，则创建一个HTMLEvents事件对象并初始化为change事件，并通过dispatchEvent方法触发change事件。如果不支持createEvent方法，则使用fireEvent方法触发onchange事件。
但是，如果想要在代码的任何位置改变.checked属性并且希望能够检测到这个改变而不需要额外的逻辑处理，这是不可能的。因为当通过编程方式改变选中状态时，事件处理程序不会被触发，这在大多数情况下是一个巨大的问题，而手动触发事件处理程序则更容易处理。
当然，可以使用类和外部函数等方式使其更方便。首先，使用document.getElementById()获取到复选框元素，并添加事件监听器，当复选框的状态发生变化时，触发change事件。然后，使用document.querySelectorAll()获取到所有具有相同类名的链接元素，并为每个链接元素添加点击事件监听器，当点击链接时，调用triggerChange函数。在triggerChange函数中，使用document.getElementById()获取到复选框元素，并通过if语句判断浏览器是否支持createEvent方法，如果支持，则创建一个HTMLEvents事件对象并初始化为change事件，并通过dispatchEvent方法触发change事件。如果不支持createEvent方法，则使用fireEvent方法触发onchange事件。
这样，每当添加一个链接时，只需要为该链接添加相同的类名即可。通过这种方式，可以更方便地管理代码。