Javascript/jQuery：如何在选中时增加数字并突出显示文本

我找了又找，但找不到我需要的东西。我对Javascript知之甚少，所以我需要一些帮助

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

例如：

50（数值）

第一组

• 选择1
• 选择2
• 选择3

第2组

• 选择1
• 选择2
• 选择3

因此，如果我单击组1/选项1和选项2加上组2/选项3，我希望数值减少3（对于3个选定选项）。我希望单击时每个项目保持选中状态，而不是单击其他选项时取消选中。然后在第二次单击时取消选择。因此，它变成：

47（数值）

第一组

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

第2组

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

---

谁能给我指出正确的方向吗

您可以为所有所需元素指定一个设置的类名，例如“选择”并在css中定义一个突出显示类，然后使用如下内容：

var numValue=50;
$(".select").click(function(){
if(this.data("selected")){
numValue +=1;
$(this).data("selected",false).toggleClass("highlight");
}else{
numValue -=1;
$(this).data("selected",true).toggleClass("highlight");
}})

[编辑]我使用了jquery中的以下内容：和

---

如果您需要对代码进行解释，请告诉我类似的说明：

基本上，我只是把所有的逻辑放在class属性中

HTML

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

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++;
        }
    });

});

传统jQuery（<1.7）

---

下面是一个使用复选框的工作示例：

我为每个组使用了以下HTML代码（请随意更改，这只是一个示例）：

---

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

您是否有一些HTML，可能还有一些Javascript或jQuery，即使它不起作用？选择列表的“multiple”属性如何？我沮丧地删除了代码。基本上我的代码是从50到49，但当它加回来时，它从49到51。我相信这是因为我错过了像Josh和GregL使用的if语句。+1您很喜欢并添加了一组更合适的复选框：）感谢GregL提供了这个示例。有了这个和Josh的例子，我可以做我需要的。谢谢Josh。查看示例并了解它们的工作原理对我帮助很大。请注意，Josh的代码使用了jQuery 1.7中引入的新的

.on（）

方法，因此您需要使用该版本（或更高版本，下一个版本发布时）。@GregL True。不过，这可以很容易地被替换掉。@Josh说得不错。我并不是说这是件坏事，我只是想弄清楚它依赖于哪个版本的jQuery。1.7还是很新的，所以不是每个人都更新过，所以如果你的答案现在依赖它，那么值得注意。@Josh我本来想过来问一下这个代码在最新的Firefox中不起作用，但是我看到你更新了一点代码。在更新到您所包含的内容后，它将在Firefox中工作。

$(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++;
        }
    });

});

$(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++;
        }
    });

});

<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>

$(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
    }); 
});