I'm building a multiple select with ES6. It's all up and functional (moving trough items, clicking them, highlighting, whatever you want) but the only problem is handling those checkboxes. Whenever an item is highlighted and enter is pressed I must catch the event, verify the number of checked items and update dropdown's title.

The methods I found so far are based on using document.createEvent() and fireEvent(), but they both are deprecated (and yes, I can't figgure out how to solve it with CustomEvent).

I've been trying to find an answer for 3 days now, trust me when I say I tried my best.

checkbox.checked = true
checkbox.checked = false

only change checkbox value but won't trigger any event

I'm building a multiple select with ES6. It's all up and functional (moving trough items, clicking them, highlighting, whatever you want) but the only problem is handling those checkboxes. Whenever an item is highlighted and enter is pressed I must catch the event, verify the number of checked items and update dropdown's title.

The methods I found so far are based on using document.createEvent() and fireEvent(), but they both are deprecated (and yes, I can't figgure out how to solve it with CustomEvent).

I've been trying to find an answer for 3 days now, trust me when I say I tried my best.

checkbox.checked = true
checkbox.checked = false

only change checkbox value but won't trigger any event

• javascript
• checkbox
• ecmascript-6
• dispatchevent

Share Improve this question Follow asked Jun 22, 2018 at 18:14 Iacovenco VladIacovenco Vlad 9911 silver badge66 bronze badges 7

• 1 Did you try triggering the click after setting the checked attribute ?checkbox.checked = true; checkbox.click() – Sushanth -- Commented Jun 22, 2018 at 18:20
• do you really need to trigger an event? why not just call the needed function directly? – Aprillion Commented Jun 22, 2018 at 18:30
• 1 developer.mozilla/en-US/docs/Web/Guide/Events/… – Kevin B Commented Jun 22, 2018 at 18:34
• @Aprillion There are multiple functions called in multiple situations while changing a checkbox value. – Iacovenco Vlad Commented Jun 26, 2018 at 11:38
• @Sushanth-- The actual checkbox is hidden, its row is highlighted when checked (or a chip appears on checking the checkbox) so click won't work. – Iacovenco Vlad Commented Jun 26, 2018 at 11:41

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 5

Since changing a checkbox value doesn't trigger any event, of course it won't trigger neither 'click' nor 'change' event. They must be triggered separately or together on whatever the case, and the listeners must be specific as well, and new Event('change') works just fine. It was a matter of how to trigger and listen the events. Thanks for the answers :-)

It might sound stupid, but have you tried simply calling click?

checkbox.click()

Not sure if applicable in OP's concrete case (that is not described in the question), but in general it should NOT be necessary to trigger events from inside your own code when it's possible to just call the same function from multiple places, e.g.:

const checkboxes = document.getElementsByTagName('input')
const button = document.getElementById('button')

const postProcess = (msg) => {console.log(`Processing after clicking ${msg}`)}

[...checkboxes].forEach(checkbox => {
  checkbox.onclick = (e) => {
    postProcess(`checkbox '${e.currentTarget.value}'`)
  }
})

button.onclick = () => {
  const previous = checkboxes[0].checked
  checkboxes[0].checked = !previous
  postProcess(`button that turned checkbox 'a' ${previous ? 'off' : 'on'}`)
}

<label><input type="checkbox" value="a">A</label>
<label><input type="checkbox" value="b">B</label>
<button id="button">Toggle A</button>