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

Question

我想计算从列表中选中的复选框的数量，然后在相应的 div 旁边显示选中的复选框的数量。也就是说，如果用户从 Dogs 列表中选择 3 个选项，从 Birds 列表中选择 2 个选项，从 reptile 列表中选择 1 个选项，则按钮旁边的 'x' 分别被替换为 3、2 和 1，而不是旁边的 6狗，正如我目前得到的那样。我试着回答这个问题 How to count every checked checkboxes

JS fiddle 示例

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

首先，您有许多无效的重复 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

Answer 2

这对你有用）此外，我还删除了你 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>

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

Count number of selected checkboxes and display value in appropriate position

html

checkbox

jquery

counter