Trigger checkbox change event with plain javascript (NOT jQuery)

Question

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

Did you try triggering the `click` after setting the `checked` attribute ?`checkbox.checked = true; checkbox.click()` — Sushanth --, Jun 22 '18 at 18:20
do you really need to trigger an event? why not just call the needed function directly? — Aprillion, Jun 22 '18 at 18:30
https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events — Kevin B, Jun 22 '18 at 18:34
@Aprillion There are multiple functions called in multiple situations while changing a checkbox value. — Iacovenco Vlad, Jun 26 '18 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, Jun 26 '18 at 11:41
@KevinB I've tried that, either it doesn't work for checkbox's `change` or I don't know how to do it. — Iacovenco Vlad, Jun 26 '18 at 11:44
you can call multiple functions in multiple situations in the same way from a function as from an event handler (which is only a function that takes `event` as an argument.. so even the handler function itself can be called directly from JS without actual event...) — Aprillion, Jul 04 '18 at 17:19

score 2 · Accepted Answer · answered Jul 05 '18 at 10:22

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

score -1 · Answer 2 · answered Jun 22 '18 at 18:21

-1

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

checkbox.click()

answered Jun 22 '18 at 18:21

Guillaume B.

64
4

It will click anyway, even if it is hidden (tried with `visibility: hidden` and `display: none`) – Guillaume B. Jun 26 '18 at 15:26

score -1 · Answer 3 · answered Jun 22 '18 at 18:47

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>

Trigger checkbox change event with plain javascript (NOT jQuery)

3 Answers3