Trigger an event when a checkbox is changed programmatically via JavaScript

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

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.

Here is a basic example:

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>

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

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

Here is an example:

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>

There are two ways of achieving this:

First way, as Josh Crozier stated, is to change the checked attribute and after that, dispatching the desired event. For instance:

// To toggle the checked state (true -> false, false -> true):
const checkBox = document.getElementById('mycheckbox');
checkBox.checked = !checkBox.checked;
checkbox.dispatchEvent(new Event('change'));

However, that way you would need to know what kind of event you're listening to. For example, in this case, you could be listening to the input event rather than the change event, and it would not work. That is why I prefer this alternative:

// To toggle the checked state (true -> false, false -> true):
const checkBox = document.getElementById('mycheckbox');
checkBox.click();

// ...Or if you want to always check (? -> true):
const checkBox = document.getElementById('mycheckbox');
if (!checkBox.checked) {
    checkBox.click();
}

// ...Or to always uncheck (? -> false):
const checkBox = document.getElementById('mycheckbox');
if (checkBox.checked) {
    checkBox.click();
}

The click() function simulates a click made by the user, so it will trigger whatever event is associated with the checkbox input. I also think it is more straight forward.

You might want to place it inside of a window.onload to make sure the dom is ready, $(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>

Also you have some alternatives to the change event

Documentation