Jquery Checkbox Change

Question

I have looked through a number of answers on here and none have really helped me. I have noticed a strange issue with my jQuery. I realise that the code is a bit quick and nasty but i will tidy it once i have it working properly.

jQuery('input#use_points').change(function() {

    if(jQuery(this).not(':checked')) {
       alert('not checked');
       jQuery( "#amount" ).val(0);
       jQuery( "#pounds" ).val(0);
       jQuery(".ui-slider-handle").css({'left': '0'});
       jQuery(".points-text").hide();
       jQuery(".use-points-labels").hide();
       jQuery("#slider-range-max").hide();
       jQuery('#updatecart').click();
    } 

    if(jQuery(this).is(':checked')) {
       alert('is checked');
       jQuery( "#amount" ).val(1);
       jQuery( "#pounds" ).val(0.05);
       jQuery(".points-text").show();
       jQuery(".use-points-labels").show();
       jQuery("#slider-range-max").show();
       jQuery('#updatecart').click();


    }
});

You will notice that i have two alerts 'not checked' and 'is checked' The first if statement works as expected. However, if it's not checked and then i click the check box it runs through both statements. Giving me the alert 'not checked' and then followed straight after by 'is checked'

However, i don't understand why this is happening since it's only getting called on the change not the click action of the check box. Does anyone have any thoughts ?

Thanks in advance.

/////////////////////////////// EDIT //////////////////////////////////////////// I have now answered my own question. For some reason writing it this way works:

jQuery('input#use_points').change(function() {

    if(this.checked) {
       alert('is checked');
       jQuery( "#amount" ).val(1);
       jQuery( "#pounds" ).val(0.05);
       jQuery(".points-text").show();
       jQuery(".use-points-labels").show();
       jQuery("#slider-range-max").show();
       jQuery('#updatecart').click();
    } else {
       alert('not checked');
       jQuery( "#amount" ).val(0);
       jQuery( "#pounds" ).val(0);
       jQuery(".ui-slider-handle").css({'left': '0'});
       jQuery(".points-text").hide();
       jQuery(".use-points-labels").hide();
       jQuery("#slider-range-max").hide();
       jQuery('#updatecart').click(); 
    }

Can anyone explain why ?

Ed_ · Accepted Answer · 2013-03-11 16:45:06Z

1

JQuery .not(selector) removes elements from your selection that match the selector's criteria, rather than checking if a condition is not true. In your case it would return a jquery object with no elements in it rather than false.

In other words, .not() is not the opposite of .is(). That's why it wasn't working

http://api.jquery.com/not/

answered Mar 11, 2013 at 16:45

Ed_

19.2k8 gold badges48 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tymeJV · Accepted Answer · 2013-03-11 15:29:19Z

Why not just have the second part of the logic be in an else statement?

jQuery('input#use_points').change(function() {

if(jQuery(this).not(':checked')) {
   alert('not checked');
   jQuery( "#amount" ).val(0);
   jQuery( "#pounds" ).val(0);
   jQuery(".ui-slider-handle").css({'left': '0'});
   jQuery(".points-text").hide();
   jQuery(".use-points-labels").hide();
   jQuery("#slider-range-max").hide();
   jQuery('#updatecart').click();
} 

else {
   alert('is checked');
   jQuery( "#amount" ).val(1);
   jQuery( "#pounds" ).val(0.05);
   jQuery(".points-text").show();
   jQuery(".use-points-labels").show();
   jQuery("#slider-range-max").show();
   jQuery('#updatecart').click();


}
});

I switched to the way i first had it because using it in an else that way wasn't working either, but if you view my edit that way did work. Not sure why

Collectives™ on Stack Overflow

Jquery Checkbox Change

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related