復選框並觸發更改事件javascript

Question

我想從javaScript 而不是 jQuery觸發更改事件和復選框。
由於這種奇怪的行為，我在使用 jQuery 時遇到了問題。
我以前用 jQuery 做的是：

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

我想用 javaScript 做同樣的事情。 這一定很簡單，但我找不到方法。 請幫助提前致謝

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

Answer 2

只有通過設置元素的 onchange 屬性注冊了事件偵聽器，所選答案才會起作用。

如果不是這種情況，您可以使用：

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

Answer 3

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

也應該工作

Answer 4

這對我有用，也會觸發change事件：

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

（在 Chrome 和 Firefox 中測試）

Answer 5

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

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

Answer 6

只需調用沒有參數的更改函數。

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

它適用於“jquery”：“3.3.1”