通过 JavaScript 以编程方式更改复选框时触发事件 [英] Trigger an event when a checkbox is changed programmatically via JavaScript

问题描述

我需要知道何时使用纯 JavaScript 的 Javascript 更改了复选框.

I need to know when a checkbox has been changed by Javascript using pure javascript.

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

I have setup an 'onchange' event that successfully executes when the user changes the checkbox but this doesn't work when another JS function changes it using code like the following:

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

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

Is it possible to fire an event using pure JavaScript when JS either checks or unchecks a checkbox?

推荐答案

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

You can create a change event with the document.createEvent/initEvent methods and then use the dispatchEvent method to dispatch the event from the specified checkbox element.

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

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

This will allow you to programmatically change the checked property of the element and then trigger a change event that will thereby fire the event listeners.

这是一个基本示例:

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() 构造函数，但浏览器支持较少.

As an alternative, you can also use the Event() constructor, however it has less browser support.

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>

这篇关于通过 JavaScript 以编程方式更改复选框时触发事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！