当通过 JavaScript 以编程方式更改复选框时触发事件答案

【问题标题】：Trigger an event when a checkbox is changed programmatically via JavaScript当通过 JavaScript 以编程方式更改复选框时触发事件
【发布时间】：2017-06-18 07:15:04
【问题描述】：

我需要知道 Javascript 何时使用纯 javascript 更改了复选框。

我设置了一个“onchange”事件，当用户更改复选框时该事件成功执行，但当另一个 JS 函数使用如下代码更改它时，这不起作用：

document.getElementById('mycheckbox').checked = true;

当 JS 选中或取消选中复选框时，是否可以使用纯 JavaScript 触发事件？

【问题讨论】：

标签： javascript events checkbox

【解决方案1】：

您可能希望将其放在 window.onload 中以确保 dom 已准备就绪，$(document).ready equivalent without jQuery

var checkbox = document.getElementById("test-check");
checkbox.addEventListener("change", checked, false);

function checked(e) {
  console.log(e.target.checked)
}

var event = new Event('change');
checkbox.checked = !checkbox.checked;
checkbox.dispatchEvent(event);

<span>
  <input type="checkbox" id="test-check">
 Test
</span>

您还有一些替代更改事件的方法

Documentation

【讨论】：

@TeChn4K 这是怎么回事？这实际上是问题的答案......
他想知道如何处理使用程序化 checkbox.value = <any_bool> 完成的更改。抱歉，您的回答无效...
@TeChn4K 如果您查看原始标题“通过Javascript更改复选框时的事件”，则在提交答案后已对问题进行了编辑，这不是我的回答“偏离主题”而是主题的情况提交后更改。我已根据您的 cmets 对其进行了更新
标题已重新表述，但问题根本没有改变。别再这样了。顺便说一句，您更新的答案仍然不起作用...您侦听 change 事件，但您发送了 check 事件。

【解决方案2】：

您可以使用document.createEvent/initEvent 方法创建change 事件，然后使用dispatchEvent method 从指定的checkbox 元素调度事件。

var event = document.createEvent("HTMLEvents");
event.initEvent('change', false, true);
checkbox.dispatchEvent(event);

这将允许您以编程方式更改元素的 checked 属性，然后触发 change 事件，从而触发事件侦听器。

这是一个基本的例子：

var checkbox = document.querySelector('[type="checkbox"]');
var button = document.querySelector('button');

// Event Listener:
checkbox.addEventListener('change', function(event) {
  alert(event.target.checked);
});

// Programmatically change the `checked` property:'
button.addEventListener('click', function() {
  checkbox.checked = !checkbox.checked;
  triggerEvent(checkbox, 'change');
});

function triggerEvent(element, eventName) {
  var event = document.createEvent("HTMLEvents");
  event.initEvent(eventName, false, true);
  element.dispatchEvent(event);
}

<input type="checkbox" />
<button>Programmatically trigger 'change' event</button>

作为替代方案，您也可以使用Event() constructor，但它对浏览器的支持较少。

var event = new Event('change');
checkbox.dispatchEvent(event);

这是一个例子：

var checkbox = document.querySelector('[type="checkbox"]');
var button = document.querySelector('button');

// Event Listener:
checkbox.addEventListener('change', function(event) {
  alert(event.target.checked);
});

// Programmatically change the `checked` property:'
button.addEventListener('click', function() {
  checkbox.checked = !checkbox.checked;
  triggerEvent(checkbox, 'change');
});

function triggerEvent (element, eventName) {
  var event = new Event(eventName);
  element.dispatchEvent(event);
}

<input type="checkbox" />
<button>Programmatically trigger 'change' event</button>

【讨论】：