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

Question

我想从列表中计算选中复选框的数量，然后在相应的 div 旁边显示选中的复选框数量。即，如果用户从 Dogs 列表中选择 3 个选项，从 Birds 列表中选择 2 个选项，从爬行动物列表中选择 1 个选项，则按钮旁边的“x”将分别替换为 3、2 和 1，而不是在 Dogs 旁边选择 6，正如我目前所得到的。我试图关注这个问题How to count every checked checkboxes

JS 小提琴示例

https://jsfiddle.net/j2dypbhc/8/

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>

Answer 1

这对你有用）我还删除了你的 html 中的一些错字。

$(".select_all").change(function(){
  var selectedTypeCount = $("input[name='" + $(this).attr('name') + "']:checked").length;
  $("[id*=" + $(this).attr('name') + "]").html(selectedTypeCount);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="type1" class="type"><h3>1.2 Select material v1</h3>
                            <span id="dogsCount">x</span><button class="bob" type="button" name="material" value="1">Dogs</button>
                            <span id="birdsCount">x</span><button  class="bob" type="button" name="material" value="2">Birds</button>                    <span id="reptilesCount">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="dogs" value="1">Pugs
                            <input  class="select_all" type="checkbox" name="dogs" value="2">Boxer
                            <input class="select_all" type="checkbox" name="dogs" value="3">Dalmation
                        </div>
                        <div id="material2" class="material">
                                <input  class="select_all" type="checkbox" name="birds" value="4">Eagle
                            <input  class="select_all" type="checkbox" name="birds" value="5">Swan
                            <input class="select_all" type="checkbox" name="birds" value="6">Budgie
                        </div>
                        <div id="material3" class="material">
                            <input  class="select_all" type="checkbox" name="reptiles" value="7">Snake
                            <input  class="select_all" type="checkbox" name="reptiles" value="8">Lizard
                            <input class="select_all" type="checkbox" name="reptiles" value="9">Iguana
                        </div>

Answer 2

首先，您有许多重复的 id 属性无效。您应该将这些更改为类。

您遇到的实际问题是因为 updateCounter() 函数中的逻辑存在缺陷。您只需要计算与显示它们的按钮相关的.material div 中的复选框。然后，您需要遍历 DOM 以找到相关的 .value 元素并更新其 text()。试试这个：

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

Updated fiddle