Why when I trigger a “change” event on a check box the event object is not updated with the new state

Question

I have 2 elements. For some reason, I'm not able to trigger a change event on a checkbox and to pass the information about the new state of the checkbox to the event method.

Why when the event is called the checked property doesn't display correctly?

 // this works perfectly fine. UI updates. The event method is called and the event e contains the new checked property $('#mycheckbox').on('change', this.onCheckboxClicked.bind(this)); // this works only partially. UI gets updated. The event methos is called but the event e doesn't contain the checked property. $('#sometext').on('click', () => $('#mycheckbox').trigger('change')); function onCheckboxClicked(e) { // display true when i click on the checkbox but false when i click on the span. Why? console.log($(e.target).prop('checked')); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" id="mycheckbox" /> <span id="sometext">My Text</span>

Answer 1

The issue is that you are triggering a change event but that will not update the checked state of the checkbox. If you change $('#mycheckbox').trigger('change') to $('#mycheckbox').trigger('click') it should work.

I must say though that you can just use:

<label for="mycheckbox">My Text</label>

to achieve the same effect.

Answer 2

Change $('#mycheckbox').trigger('change') to $('#mycheckbox').trigger('click') .

In order to provide a better user experience for those without the use of a mouse, browsers have been developed to fire the onclick event even if the click occurs with a keyboard .

For this reason, jQuery's

1. click event will fire even if the checkbox is clicked by using the keyboard's spacebar.
2. change will fire every time the checkbox's state changes.

The checkbox just happens to be the special case where change and click are interchangeable because you can't fire the change event without also triggering click.

 $('#mycheckbox').on('change', this.onCheckboxClicked.bind(this)); $('#sometext').on('click', () => $('#mycheckbox').trigger('click')); function onCheckboxClicked(e) { console.log($(e.target).prop('checked')); }

 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <input type="checkbox" id="mycheckbox" /> <span id="sometext">My Text</span>

Answer 3

It worked for me when I did this. Don't know why but the proposed approach with click using jquery 3.5 and a kind of bootstrap styled input didn't work.

$('#sometext').on('click', () => Promise.resolve().then(() => $('#mycheckbox').trigger('change')));

UPDATE

Seems like when another EventHandler is attached to the same element, for example if I have this:

<input type="checkbox" class="mycheckbox" id="mycheckbox" />
<span id="sometext" class="myspan">My Text</span>

and then

$('#mycheckbox').on('change', this.onCheckboxClicked.bind(this));

// even though .myspan is a different class, the event is attached to the 
// same DOM object which not only generates the issue described in the 
// question but also will nullify the solution in the answer proposed.
$('.myspan').on('click', this.onAnotherMethodClicked.bind(this));

$('#sometext').on('click', () => $('#mycheckbox').trigger('change'));