Javascript/jQuery : How to increment a number and highlight text when selected

Question

我找了又找，还是找不到我需要的东西。我对 Javascript 知之甚少，因此我需要一些帮助。

我有一个数字，比如 numValue，我想根据在不同区域选择的项目来增加或减少它。另外，我希望这些项目突出显示并保持突出显示，直到再次单击为止。选中时我希望 numValue 减 1，取消选中时我希望 numValue 增加 1。

例子:

50(数值)

第一组

• 选项 1
• 选项 2
• 选项 3

第 2 组

• 选项 1
• 选项 2
• 选项 3

因此，如果我单击组 1/选项 1 和选项 2 加上组 2/选项 3，我希望 numValue 减少 3(对于 3 个选定选项)。我希望每个项目在单击时保持选中状态，而不是在单击另一个选项时取消选择。然后在第二次单击时取消选择。于是就变成了:

47(数值)

第一组

• 选项 1
• 选项 2
• 选项 3

第 2 组

• 选项 1
• 选项 2
• 选项 3

谁能指出我正确的方向？

Answer 1

这是一个使用复选框的工作示例:http://jsfiddle.net/greglockwood/D6CP4/1/

我为每个组使用了以下 HTML 代码(您可以随意更改它，这只是一个示例):

<div class="group">
    <span class="header">Group 1</span>
    <ul>
        <li><input type="checkbox" id="group1_1" /><label for="group1_1">Option 1</label></li>
        <li><input type="checkbox" id="group1_2" /><label for="group1_2">Option 2</label></li>
        <li><input type="checkbox" id="group1_3" /><label for="group1_3">Option 3</label></li>
    </ul>
</div>

这是我的 Javascript，它使用了 jQuery:

$(function() {
   var numValue = 50;
    $('.group :checkbox').click(function() {
       var $cb = $(this);
        if ($cb.is(':checked')) {
            numValue -= 1;
            $cb.closest('li').addClass('highlight');  
        } else {
            numValue += 1;
            $cb.closest('li').removeClass('highlight');
        }
        $('#numValue').text(numValue); // show the value on the page
    }); 
});

如果您有任何问题，请告诉我。