jQuery: trigger actions on checkboxes

by lovromar

HTML

<form id="form" action="#" method="post">

<label for="test">Only even
    <input type="checkbox" id="test" name="test"/>
</label>

<ol>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
</ol>
</form>

CSS

.even {
    background: yellow;
}

JavaScript

var selectEven = function(element) {
    var $index = element.index() + 1;
    if ($index % 2 == 0) {
        element.addClass('even');
    }

};

var makeEven = function(elements) {
    elements.each(function() {
        var elem = $(this);
        selectEven(elem);
    });
};

var undoEven = function(elements) {
    elements.each(function() {
        var elem = $(this);
        if (elem.hasClass('even')) {
            elem.removeClass('even');
        }
    });
};


var $elements = $('li', '#form');


$('#test').change(function() {
    var $checkbox = $(this);
    if ($checkbox.prop('checked')) {
        makeEven($elements);
    } else {
        undoEven($elements);
    }
});