检查复选框并触发更改事件javascript答案

【问题标题】：check checkbox and trigger change event javascript检查复选框并触发更改事件javascript
【发布时间】：2021-10-18 01:03:05
【问题描述】：

我想从 javaScript 而不是 jQuery 触发更改事件并选中复选框。
由于这个Strange Behaviour，我遇到了jQuery 问题。
我以前用 jQuery 做的是：

$('#laneFilter').prop('checked','true').trigger('change');

我想对 javaScript 做同样的事情。这一定很简单，但我找不到方法。请帮忙提前谢谢

【问题讨论】：

标签： javascript checkbox

【解决方案1】：

有几种方法可以做到这一点。最简单的方法是调用该函数：

var Chkinput = document.getElementById("laneFilter");
Chkinput .onchange();

如果你需要它来完全模拟真实事件，或者你通过html属性或addEventListener/attachEvent设置事件，你需要做一些特征检测来正确触发事件：

if ("createEvent" in document) {
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);
    element.dispatchEvent(evt);
}

【讨论】：

【解决方案2】：

只有在通过设置元素的 onchange 属性注册了事件监听器时，选择的答案才会起作用。

如果不是这样，可以使用：

    let element = document.getElementById('laneFilter');
    let event = new Event('change');
    element.dispatchEvent(event);

【讨论】：

【解决方案3】：

这对我有用，也触发了change 事件：

const Chkinput = document.getElementById("laneFilter");
Chkinput.click();

（在 Chrome 和 Firefox 中测试）

【讨论】：

【解决方案4】：

<input type="checkbox" id="laneFilter"/>
<script> 
    checkbox = document.getElementById("laneFilter");
    checkbox.onclick = function(){ 
        alert('lol');
    };
    checkbox.checked = true;
</script>

应该也可以

【讨论】：

【解决方案5】：

我把它剪成 2 然后工作正常

$('#laneFilter').prop('checked','true');
$('#laneFilter').trigger('change');

【讨论】：

问题说不要使用jQuery。

【解决方案6】：

只调用不带参数的change函数。

$('#laneFilter').change('change', function(){
        debugger
        ...
}).change();

它适用于“jquery”：“3.3.1”

【讨论】：

问题明确指出不要使用 jQuery。