Question

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

我已经设置了一个＆＃39; onchange＆＃39;当用户更改复选框时成功执行的事件，但当另一个JS函数使用以下代码更改它时，这不起作用：

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

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

Answer 1

您可以使用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>

Answer 2

您可能希望将其放在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

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

2 个答案: