How can I understand this flag behavior?

Question

Here is my HTML:

<input class='user_roles' id="chk" type=checkbox />
<input id="btn_on" type="button" value="on" />
<input id="btn_off" type="button" value="off" />

And my jQuery:

 $('#chk').click(function() { if($(this).prop("checked") === true) { alert ("checked"); } else{ alert ("not checked"); } }); $("[id$=btn_on]").click(function () { $('#chk').click(); }); $("[id$=btn_off]").click(function () { $('#chk').click(); }); 

A working example is here .

When you click on a checkmark with the mouse, it is checked immediately - that is, the warning is displayed as "checked". However, when you click one of the buttons that indirectly calls the click method on a flag, this flag is not pressed until the click code is executed.

To check this, check the box several times with the mouse and you will see the warnings "checked" and "not checked" respectively. Click "On" and you will see a warning "not verified", and then check the box. If you then click “Off,” you will see “checked,” and then check the box.

What is the reason for this behavior? How can I make sure that the check box occurs before the click listener code is called according to the behavior of the mouse?

Answer 1

If it's just a question of how to make it work, use .change() instead of .click() in your checkbox, if its about why it does what it does, I don’t know, sorry

Answer 2

Try using setTimeout, which will wait a bit, and then check it out. The problem is that the trigger event is even faster than the flag being switched for an unknown reason.

Working script

 $('#chk').click(function() { var $this = $(this); setTimeout(function() { if ($this.prop("checked") === true) { alert("checked"); } else { alert("not checked"); } }, 10); }); $("[id$=btn_on]").click(function() { $('#chk').click(); }); $("[id$=btn_off]").click(function() { $('#chk').click(); }); 

Answer 3

Use the onchange event instead of onclick:

http://jsfiddle.net/FCrSg/8/

The onclick event is fired when a window is clicked before the field value is changed.

The workflow looks like this: you click on the mouse button => OnClick event fired => checkmark tick => OnChange event fired

Answer 4

A physical click on a flag causes it to be checked before the click event is triggered. Using jquery to click it, the event code is fired first. Using the change event will produce the desired results.

See a working example below.

http://jsfiddle.net/FCrSg/3/

Answer 5

It seems to me that the explanation is that this is a mistake in the way the browser handles clicks on checkboxes:

The default behavior should be executed after calling the custom event handler. So what you see when you click the buttons is actually the correct behavior. The funny behavior is that when you click on a checkbox, it is checked before the user-defined event handler is launched.

To find out how strange this is, you can return false; from the event handler. This should prevent default behavior. What you will see is that the checkbox is really checked when you click it, and then turns off after the event handler returns!

By the way, I use Firefox 4. I do not know how it looks in other browsers. This doesn't seem to be related to jQuery, as I see the same ridiculous behavior when I do everything without it.

Answer 6

I found this response to a stack overflow that manually creates an event and dispatches it.

You can put it in a function and call it from click events:

 function simulateClick(target) { var e = document.createEvent('MouseEvents'); e.initEvent( 'click', true, true ); target.dispatchEvent(e); } $("[id$=btn_on]").bind("click", function() { simulateClick($('#chk')[0]); }); $("[id$=btn_off]").click(function() { simulateClick($('#chk')[0]); }); 

Try it here: http://jsfiddle.net/FCrSg/10/

Almost the same as you wanted on MDN: https://developer.mozilla.org/en/DOM/dispatchEvent_example

Answer 7

You can do:

 function alertState(el){ if(el.prop("checked") === true) { alert ("checked"); } else{ alert ("not checked"); } } $('#chk').click(function() { alertState($(this)); }); $("[id$=btn_on]").click(function () { $('#chk').prop('checked', true); alertState($('#chk')); }); $("[id$=btn_off]").click(function () { $('#chk').removeProp('checked'); alertState($('#chk')); }); 

fiddle here http://jsfiddle.net/FCrSg/9/