Question

I’m creating some custom “checkboxes” and what I mean by that is I’m just stylizing label elements and will be positioning the checkbox off the screen. This is the design/functionality that came in, so I figured I’d give it a go using semantic checkboxes.

What I want is when you click one of these custom “checkboxes” (you’re really triggering the stylized label), the “checkbox” should change color and the background div behind all the “checkboxes” should “light up” as well. I’ve got all that working.

When you uncheck the “checkboxes”, that “checkbox” would unhighlight but you should still get the background div color while you have any “checkboxes” checked. When you uncheck that final “checkbox”, it should unhighlight and turn off that background div color. This is where I’m having problems.

Best illustrated with an example!

http://jsfiddle.net/xS2JU/

I’ve got console.log statements and if you watch them, you’ll see I’m not executing that 3rd branch when you turn off the last checkbox. I’m just keeping track of the checked state and using a simple counter to keep track of how many “checkboxes” are checked. Anyone have any ideas?

Answer 1

Live Demo

Since this is only doing it onchange count would always be at LEAST 1, so it was never at 0 thus the 3rd branch was never called. Or a better explanation, if one was unchecked it HAD to be checked prior, making count start at 1 on the last call. I just moved your condition inside of the 2nd condition because this is where you uncheck, at that point you see if they all are unchecked.

$(function() {
    var $help_choices    = $('#help_choices'),
        count            = 0;

        console.log(count);

    $('input:checkbox', $help_choices).change(function() {
        var checked    = this.checked,
            $label    = $(this).parent();
        if (checked) { //additive checkboxes, check one or multiples
            $help_choices.addClass('help_choices_selected');
            $label.addClass('help_label_selected');
            count++;
            console.log(checked + '  ' + count);
        } else { //subtractive checkboxes, uncheck one or multiples
            count--;
            $label.removeClass('help_label_selected');

           // Put the final check here 
           if(count === 0){
                 $help_choices.removeClass('help_choices_selected');
                $label.removeClass('help_label_selected');
                console.log(checked + '  ' + count + ' 3rd branch');
            }
        }
    });

});

Also heres a bit shorter code where you dont have to keep track of count, could be optimized further, but basically I just check if any inputs are checked within the parent by getting the length of the input:checked on the #help_choices element.

Demo 2

$(function() {
    var $help_choices    = $('#help_choices');        

    $('input:checkbox', $help_choices).change(function() {
        var checked    = this.checked,
            $label    = $(this).parent();

        if (checked) { //additive checkboxes, check one or multiples
            $help_choices.addClass('help_choices_selected');
            $label.addClass('help_label_selected');
        } else{ //subtractive checkboxes, uncheck one or multiples
            $label.removeClass('help_label_selected');

            if($('#help_choices input:checked').length === 0){
                $help_choices.removeClass('help_choices_selected');
            }
        }
    });
});