如何在当前div中计算已选中的复选框数量并显示数字

Question

我已经查找了相关内容，但未能找到完全符合我的问题的解决方案。

以下是我的代码http://jsfiddle.net/msx20/xprc2/1/，我想做的事情是... 我只想在每个手风琴div中计算选中的复选框数量，并在由带有类“accordion_counter”的jQuery添加的span中显示选中项目的数量（我不想显示0）。而且对我来说很重要的是，我想为每个手风琴div显示选中的项目，并在左边的选项卡中的span中显示计数数字。

我尝试过这个。

$('input[type="checkbox"]:checked').length 

并且。

$(document).ready(function() {
        $("input[type=checkbox]").each(function() {
            $(this).change(updateCount);
        });

        updateCount();

        function updateCount() {
            var count = $("input[type=checkbox]:checked").size();

            $(".count").text(count);
            $(".count").toggle(count > 0);
        }
});

但这样统计的是所有选中的输入框....也许这是个愚蠢的问题，但我不太懂jquery。有人能帮我吗？

- user1597594

---

尝试查看jquery.closest方法（http://api.jquery.com/closest/）。 - Alexander Kuzmin

Answer 1

try to remove this:

       $("input[type=checkbox]").each(function() {
            $(this).change(updateCount);
        });

并插入这个：

       $("input[type=checkbox]").change(function() {
            updateCount();
        });

- Alessandro Minoccheri

Answer 2

你需要使用 jQuery 选择器。

$('#group_subgrup_1 input:checked').length; 
$('#group_subgrup_2 input:checked').length; 

等等，

group_subgrup_1和group_subgrup_2是手风琴容器。只有考虑每个复选框的计数。

因此，在您的常规单击/更改函数中，您可以简单地调用上述内容并获取各个计数，并在任何您想要显示的位置进行显示。

所以基本上：

$(document).ready(function () {
    $("input[type=checkbox]").each(function () {
        $(this).change(updateCount);
    });

    updateCount();

    function updateCount() {

    var count1 = $('#group_subgrup_1 input:checked').length; 
    var count2 = $('#group_subgrup_2 input:checked').length;

...

    $(".count1").text(count1);
    $(".count2").text(count1);

等等。

    }
});

希望你能理解这个想法。

- Roy M J