jQuery: Changing classes on click

Question

I have a series of checkboxes that I want to make a little more mobile-friendly so I'm hiding the checkbox and using labels as buttons. What I want to do is give the user feedback by changing the color of the label from yellow to green when they tap, and then back to yellow when tapping again. I'm pulling my hair out trying to understand why what I'm using isn't working.

<div id="div">
    <label for="checkbox" id="label1" class="bg-warning text-center pointer" style="width:100px; padding:8px">
            <input type="checkbox" name="checkbox1" id="checkbox1" value="checked1" style="display:none">test
        </label>
    </div>

    <label for="checkbox" id="label2" class="bg-warning text-center pointer" style="width:100px; padding:8px">
            <input type="checkbox" name="checkbox2" id="checkbox2" value="checked2" style="display:none">test
        </label>
    </div>
</div>

<script>
    $(document).ready(function(){
        $('#div').on('click', function(e) {
            $('#div').each( function( index, element) {

                var el = $(element);

                if($(el).hasClass('bg-warning')) {
                    $(el).removeClass('bg-warning').addClass('bg-success');
                } else {
                    $(el).removeClass('bg-success').addClass('bg-warning');
                }
            });
        });
    });
</script>

Answer 1

First, I would give the divs unique IDs. Then you can set a common class to them (ie: div):

<div id="div1" class="div">
    <label for="checkbox" id="label1" class="bg-warning text-center pointer" style="width:100px; padding:8px">
        <input type="checkbox" name="checkbox1" id="checkbox1" value="checked1" style="display:none" />test
    </label>
</div>
<div id="div2" class="div">
    <label for="checkbox" id="label2" class="bg-warning text-center pointer" style="width:100px; padding:8px">
        <input type="checkbox" name="checkbox2" id="checkbox2" value="checked2" style="display:none" />test
    </label>
</div>

...

$(document).ready(function () {
    $('.div').on('click', function (e) {
        // Find the labels within the clicked div.
        var el = $('label', this);

        // Toggle their classes.
        // No loop needed, as the selector will bring all the elements
        // and apply the change to each one of them.            
        $(el).toggleClass('bg-warning').toggleClass('bg-success');
    });
});

Demo

UPDATE

After our chat in the comments, I think you have two other options here.

Remember to use a # when setting the for attribute for the labels (ie: for="#checkbox2").

First, you keep checking for clicks/taps in the div:

$(function () {    
    $('.div').on('click', function () {
        var label = $('label', this);
        var checkbox = $('input[type=checkbox]', this);

        label.toggleClass('bg-warning bg-success');

        // Checking the label class and deciding if we
        // need to check the checkbox.
        checkbox.prop('checked', label.hasClass('bg-success'));
    });

    $('label input[type=checkbox]').on('click', function(e) {
        // As what's actually clicked is the label, let's
        // ignore the default behavior.
        e.preventDefault();

        // And transfer the click to the div itself.
        $(this).parents('.div').trigger('click');        
    });
});

Demo

Second, you just handle the clicks/taps in the label (which I recommend):

$(function () {    
    $('label').on('click', function () {
        $(this).toggleClass('bg-warning bg-success')
            .find('input[type=checkbox]')
            .prop('checked', $(this).hasClass('bg-success'));
    });
});

Demo