Question

I’ve searched and search, but cannot find what I need. I know very little about Javascript so I need a bit of help with this.

I have a number, say numValue, that I want to increase or decrease based on items being selected in different areas. Plus I want those items to highlight and stay highlights until clicked again. When selected I want numValue to decrease by 1 and when deselected I want numValue to increase by 1.

Example:

50 (numValue)

Group 1

• Option 1
• Option 2
• Option 3

Group 2

• Option 1
• Option 2
• Option 3

So if I click on Group 1/Option 1 and Option 2 plus Group 2/Option 3 I want the numValue to decrease by 3 (for 3 selected options). I want each item to stay selected when clicked not deselect when another option is clicked. Then deselect when clicked a second time. So it becomes:

47 (numValue)

Group 1

• Option 1
• Option 2
• Option 3

Group 2

• Option 1
• Option 2
• Option 3

Can anyone point me in the right direction?

Answer 1

Something like this should work: http://jsfiddle.net/2NJNT/

Basically, I’d just put all the logic in the class attribute.

HTML

<ul class="selector">
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
    <li>Qux</li>    
</ul>

CSS

.selector .chosen{
    font-weight: bold;
}

JavaScript

$(function () {
    var selector = $('ul.selector'),
        numValue = 0,
        HIGHLIGHT_CLASS = 'chosen';

    selector.on('click', 'li', function () {
        var src = $(this);

        if (src.hasClass(HIGHLIGHT_CLASS)) {
            src.removeClass(HIGHLIGHT_CLASS);
            numValue--;
        } else {
            src.addClass(HIGHLIGHT_CLASS);
            numValue++;
        }
    });

});

Legacy jQuery (< 1.7)

$(function () {
    var numValue = 0,
        HIGHLIGHT_CLASS = 'chosen';

    $('ul.selector').delegate('li', 'click', function () {
        var src = $(this);

        if (src.hasClass(HIGHLIGHT_CLASS)) {
            src.removeClass(HIGHLIGHT_CLASS);
            numValue--;
        } else {
            src.addClass(HIGHLIGHT_CLASS);
            numValue++;
        }
    });

});