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

首先，您有许多重复的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中的一些拼写错误。

＆＃13;

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

＆＃13;

Date.UTC(year, month[, day[, hour[, minute[, second[, millisecond]]]]])

＆＃13;

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

2 个答案: