-2

I'm trying to monitor any changes to the "checked" property of a checkbox on both mousedown() and mouseup(), but seem to be having issues. The mousedown event is registering the correct state of the checkbox (checked or un-checked), but the mouseup event is registering those states in reverse.

If the checkbox is checked on mouseup, the mouseup event is saying it's un-checked, and if the checkbox is un-checked on mouseup, the event is saying it's checked. Any ideas what's going on here?

Here's the pertinent code:

$('.input-wrapper input[type=checkbox]').mousedown(function() {

    console.log('===== MOUSEDOWN =====');

    if (this.checked) {
        console.log('The checkbox already had the "checked" attribute on mousedown');
    }
    if (!this.checked) {
        console.log('The checkbox did NOT have the "checked" attribute on mousedown');
    }

    console.log('\n\n');

}).mouseup(function() {

    console.log('===== MOUSEUP =====');

    if (this.checked) {
        console.log('The checkbox was assigned the "checked" attribute on mouseup');
    }
    if (!this.checked) {
        console.log('The checkbox\'s "checked" attribute was removed on mouseup');
    }

    console.log('\n\n');

});

...

I've also setup a demo on jsFiddle, here.

Lumi Lu
  • 3,289
  • 1
  • 11
  • 21
Amygdala
  • 83
  • 1
  • 9
  • 2
    Pretty sure mouseup fires before checked is changed – juvian Jan 07 '15 at 19:15
  • I was afraid that was what was happening... Do you think there may be any way around that? – Amygdala Jan 07 '15 at 19:16
  • Well, you could just change the order of the mouse up console.log – juvian Jan 07 '15 at 19:20
  • What exactly are you trying to do? – charlietfl Jan 07 '15 at 19:22
  • If `n` checkboxes are already checked on mousedown, then i need to prevent the current checkbox from being checked on mouseup. – Amygdala Jan 07 '15 at 19:24
  • 1
    that's simple, just disable it so user can't do anything with it. Provide full details of your issue within the question, this is an X-Y problem – charlietfl Jan 07 '15 at 19:25
  • That is not the problem reflected in the question. Please change your question and ***clearly*** describe the issue. – Dom Jan 07 '15 at 19:25
  • Sorry @Dom, but the problem reflected in the question is exactly the issue I wanted resolved. The answer appears to be the execution order of said events. Regardless of the reasoning of why I needed to accomplish it, the problem remained that mouseup was not registering the correct state of the checkbox. No need to get up on your pedestal and talk down to someone you think beneath you. – Amygdala Jan 07 '15 at 19:28
  • 1
    @Amygdala the reasoning is all important because your approach to the higher level problems isn't working, but the higher level problem was never mentioned. Thus it is an [X-Y problem](http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem) Please have more respect for people trying to help you – charlietfl Jan 07 '15 at 19:30
  • So what you're telling me is, nobody else will/should be looking for answers as to why mouseup() isn't registering the correct state of a checkbox. Thus, they will all be looking to accomplish the exact same thing as me, and therefore, I should ask about the underlying mechanism rather than the actual problem? That's retarded. – Amygdala Jan 07 '15 at 19:34
  • No, you are using the wrong tools for the job obviously, but you haven't defined what the job is. you are focused on a single checkbox, but should focus on the group instead. No group relationship was ever mentioned – charlietfl Jan 07 '15 at 19:35
  • We're clearly getting into semantics here. Regardless of the number of checkboxes involved, the issue would remain that the checked property of said checkboxes would not be updated on the mouseup() event. End of story. – Amygdala Jan 07 '15 at 19:36
  • Well there are typical approaches to your `problem`. If you want to be argumentative instead of utilizing the vast wealth of knowledge available here...so be it...good luck with that attitude. Keep your emotions in check, people are here to help – charlietfl Jan 07 '15 at 19:38
  • Good luck with what attitude? My defensive posture was brought on purely by yours and @Dom's offensive stance. This place is about learning, is it not? Belittling someone, or making them feel inadequate in a place of learning is a little on the counter-intuitive side, I would think. – Amygdala Jan 07 '15 at 19:40
  • All we asked for was the higher level problem. You took that far too personally!! Instead of getting a solution, you dug in your heels. raed what an X-Y problem is, this is a classic case – charlietfl Jan 07 '15 at 19:41
  • And a very good day to you as well. – Amygdala Jan 07 '15 at 19:44

2 Answers2

1

The issue is that mouse up runs before the control is actually changed.

ex. box is not checked then clicked

mouse down - this.checked is false

mouse up - this.checked is still false because the control has not actually changed.

this.checked is not updated until after mouse up is ran.

Buck3y3
  • 136
  • 8
0

jQuery offers a quite interesting method called .change, which fires everytime the checkbox is checked or unchecked.

$('.input-wrapper input[type=checkbox]').change(function() {

    if (this.checked) {
        // do this
    } else {
        // do that
    }
});

See JSFiddle: http://jsfiddle.net/ayj1o9dc/3/

Afonso Matos
  • 2,406
  • 1
  • 20
  • 30
  • because "change" only applies AFTER the checkbox has changed states... I need to be able to tell if restrictions have been met BEFORE i allow the state to change. – Amygdala Jan 07 '15 at 19:18
  • but @Amygdala you can preventDefault() ...need to be more clear on your goals – charlietfl Jan 07 '15 at 19:20
  • @Amygdala Just use `$(this).attr('checked', false);` if the restrictions are not met. – Afonso Matos Jan 07 '15 at 19:24