Run Functions on Checkbox values?

Question

I've been trying to update results based off of how many checkboxes a user has checked on a page.

If the user has checked 5 or more then it should fade 2 divs.

If the user has checked 10 or more it should fade another two divs.

If the user chooses 10 or more it should fade another set.

I can get the first function to run but I believe since the first if statement has been completed, it's not looking for updates/value changes? The others do not fade back to 100% opacity either.

$('input:checkbox').change(function() {
    var boxChecked = $('input:checkbox:checked').length;
    if (boxChecked > 5) {
        $('.div-1, .div-2').fadeTo(500, 0.4)
    }
    else if (boxChecked > 10) {
        $('.div-1, .div-3').fadeTo(500, 0.4)
    }
    else if (boxChecked > 11) {
        $('.div-1, .div-2').fadeTo(500, 0.4)
    }
});

Are the divs supposed to cumulatively fade, or is it only for the greatest condition that is met? — drneel
– drneel, Commented Aug 27, 2014 at 19:12
The div-3 and the div-2 in the 2nd and 3rd fadeTo statements, respectively, are both missing the . class selector. Is this intended? — Stryner
– Stryner, Commented Aug 27, 2014 at 19:12
plus you want to use boxChecked >= 5 style for all your ifs, since you said "if the user has checked 5 or more". boxChecked > 5 means the code won't be run unless the user has 6 or more boxes checked. — ps2goat
– ps2goat, Commented Aug 27, 2014 at 19:14
Sorry, updated the class selectors. Not sure why they were missing but were there in my js file. — Miura-shi
– Miura-shi, Commented Aug 27, 2014 at 19:14
@AoiHana both 5 and 11 are greater than 10, what should happen when 11 are checked? Should div-1, div-2, and div-3 fade out? or just 1 and 3 — drneel
– drneel, Commented Aug 27, 2014 at 19:22

Will · Accepted Answer · 2014-08-27 19:34:05Z

1

You need to either set ranges for your if/else statement conditions or just use if statements for your code to function correctly.

For example, if length > 5, the first branch will be taken.

However, your second branch checks if length > 10, but will never reach this statement since the first condition is also true.

You can try something like this:

   $('input:checkbox').change(function() {
    var boxChecked = $('input:checkbox:checked').length;
    if (boxChecked === 2) {
        $('.div-1, .div-2').fadeTo(500, 0.4);
    }
    else if (boxChecked > 3 && boxChecked <5) {
        $('.div-1, .div-3').fadeTo(500, 0.4);
    }
    else if (boxChecked > 4) {
        $('.div-1, .div-2').fadeTo(500, 0.4);
    }
    else {
        $('.div-1, .div-2, .div-3').fadeTo(500,1);
    }
});

Edit: Added a jsfiddle and fixed a bug - added an else to reset the divs when conditions aren't met. JSFiddle: http://jsfiddle.net/148cL5rc/1/

edited Aug 27, 2014 at 19:34

answered Aug 27, 2014 at 19:28

Will

1,3099 silver badges9 bronze badges

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

1 Comment

Miura-shi Over a year ago

Thank you for your time. This helped me a lot. I understand better now how to set these up.

drneel · Accepted Answer · 2014-08-27 19:27:10Z

1

Reverse your if statements. > 5 is always going to be true when you get above 5, so you want to start checking with the higher numbers and work your way to lower numbers.

$('input:checkbox').change(function() {
    var boxChecked = $('input:checkbox:checked').length;
    if (boxChecked > 11) {
        $('.div-1, .div-2').fadeTo(500, 0.4)
    } else if (boxChecked > 10) {
        $('.div-1, .div-3').fadeTo(500, 0.4)
    } else if (boxChecked > 5) {
        $('.div-1, .div-2').fadeTo(500, 0.4)
    }
});

answered Aug 27, 2014 at 19:27

drneel

2,9055 gold badges32 silver badges49 bronze badges

Collectives™ on Stack Overflow

Run Functions on Checkbox values?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related