Jquery 计算所选复选框的数量，并在适当位置显示值

我想从列表中计算所选复选框的数量，然后在相应的div旁边显示所选复选框的数量。即，如果用户从“狗”列表中选择3个选项，从“鸟”列表中选择2个选项，从“爬行动物”列表中选择1个选项，则按钮旁边的“x”将分别替换为3、2和1，而不是像我目前看到的那样，在狗旁边选择6个选项。我试着回答这个问题

JS小提琴示例

HTML

<div id="type1" class="type">
    <h3>1.2 Select material v1</h3>

    <span id="value">x</span>
    <button class="bob" type="button" name="material" value="1">Dogs</button>

    <span id="value">x</span>
    <button class="bob" type="button" name="material" value="2">Birds</button>                  

    <span id="value">x</span>
    <button class="bob" type="button" name="material" value="3">Reptiles</button>                       
</div>
<div id="material1" class="material">
    <input  class="select_all" type="checkbox" name="tile[]" value="1">Pugs
    <input  class="select_all" type="checkbox" name="tile[]" value="2">Boxer
    <input clas="select_all" type="checkbox" name="tile[]" value="3">Dalmation
</div>
<div id="material2" class="material">
    <input  class="select_all" type="checkbox" name="tile[]" value="4">Eagle
    <input  class="select_all" type="checkbox" name="tile[]" value="5">Swan
    <input clas="select_all" type="checkbox" name="tile[]" value="6">Budgie
</div>
<div id="material3" class="material">
    <input  class="select_all" type="checkbox" name="tile[]" value="7">Snake
    <input  class="select_all" type="checkbox" name="tile[]" value="8">Lizard
    <input clas="select_all" type="checkbox" name="tile[]" value="9">Iguana
</div>

1.2选择材料v1
x
狗
x
鸟
x
爬行动物
哈巴狗
拳击手
玩弄
鹰
天鹅
鹦鹉
蛇
蜥蜴
鬣蜥

首先，您有许多重复的

id

属性，这些属性无效。您应该将这些更改为类

您实际遇到的问题是因为

updateCounter（）

函数中的逻辑有缺陷。您只需要计算与显示它们的按钮相关的

.material

div中的复选框。然后需要遍历DOM以找到相关的

.value

元素并更新其

文本（）。试试这个：

$(document).ready(function() {
    $(".bob").click(function() {
        var divname = this.value;
        $(this).addClass("active")
        $("#material" + divname).show().siblings('.material').hide();
    });
    $('#value').text('');

    $("#general-content input:checkbox").on("change", updateCounter);
})

function updateCounter() {
    var $material = $(this).closest('.material');
    var $value = $(".value").eq($material.index('.material'));
    var len = $material.find("input[name='tile[]']:checked").length;
    $value.text(len > 0 ? '(' + len + ')' : 'x');
}

这对你很有用）我还删除了你的html中的一些输入错误


$（“.select_all”）.change（函数（）{
var selectedTypeCount=$（“输入[name=”+$（this）.attr（'name'）+“]：选中”）.length；
$（“[id*=”+$（this.attr（'name'）+“]”）html（selectedTypeCount）；
});

1.2选择材料v1
xDogs
xBirds X爬行动物
哈巴狗
拳击手
玩弄
鹰
天鹅
鹦鹉
蛇
蜥蜴
鬣蜥
单击它应该计数的内容？？？单击它应该计数所选复选框的数量。我已经走了那么远。我现在的问题是要把计数按类型分开。没问题，很乐意帮忙。