logo标签列表

如何计算每个已选中的复选框数量？

javascriptjquerycheckbox
29

这是我的代码:

它实际上计算选中的复选框，并将其写入<span class="counter"></span>内。 这段代码在Firefox上可以正常工作，但在Chrome上不行。

在Chrome上，.select_all可以选中我想要的所有复选框，但无法更新计数器。 实际上，只有在取消选择.select_all时，计数器才会更新，这很奇怪。

重要事实：我不想在我的.counter内计算.Select_all复选框

jQuery(document).ready(function($){

$(function() {
    $('#general i .counter').text(' ');

    var generallen = $("#general-content input[name='wpmm[]']:checked").length;
    if(generallen>0){$("#general i .counter").text('('+generallen+')');}else{$("#general i .counter").text(' ');}
})

$("#general-content input:checkbox").on("change", function() {
    var len = $("#general-content input[name='wpmm[]']:checked").length;
    if(len>0){$("#general i .counter").text('('+len+')');}else{$("#general i .counter").text(' ');}
});


$(function() {
    $('.select_all').change(function() {
        var checkthis = $(this);
        var checkboxes = $(this).parent().next('ul').find("input[name='wpmm[]']");

        if(checkthis.is(':checked')) {
            checkboxes.attr('checked', true);
        } else {
            checkboxes.attr('checked', false);
        }
    });
});

});

编辑：这里有一个代码的示例文档：http://jsfiddle.net/8PVDy/1/

为什么不尝试简单的JavaScript呢？ - polin
你能提供一个可演示问题的工作 jsFiddle 吗？ - Anthony Grist
1
请查看此帖子：https://dev59.com/52sz5IYBdhLWcg3wR1kc - Rinku
你有收到任何 JavaScript 错误吗？为什么 .on 块不在 jQuery 的 ready 函数内部？ - Andy
这是工作文档：http://jsfiddle.net/8PVDy/1/ - hawkidoki
请参见"问题标题中是否应包含“标签”？"，共识是“不应该”！ - user57508
7个回答
64
您可以使用一个函数来更新计数器：
function updateCounter() {
    var len = $("#general-content input[name='wpmm[]']:checked").length;
    if(len > 0){
       $("#general i .counter").text('('+len+')');
    } else { 
       $("#general i .counter").text(' ');
    }
}

当复选框的状态改变时（包括全选复选框），调用此函数。

这是一个更新后的 jsFiddle ：http://jsfiddle.net/8PVDy/4/

43
$('input[type="checkbox"]:checked').length
重要事项：我不想在我的.counter中计算.Select_all复选框。 - hawkidoki
5
$('input[type="checkbox"]:checked').not('.Select_all').length - Paul
11

你可以用这种方式做

$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
    alert($('.test:checked').length);

});
});

我使用的是HTML

<input type="checkbox" name="test" class="test" value=""/>  
<input type="checkbox" name="test" class="test" value=""/>  
<input type="checkbox" name="test" class="test" value=""/>  
<input type="checkbox" name="checkAll" class="checkAll" value=""/>

希望这能帮到你

2

要更新选中状态，请使用jQuery.prop()函数

代码：

$(function(){
    $('#general i .counter').text(' ');

    var fnUpdateCount = function() {
        var generallen = $("#general-content input[name='wpmm[]']:checked").length;
        console.log(generallen,$("#general i .counter") )
        if (generallen > 0) {
            $("#general i .counter").text('(' + generallen + ')');
        } else {
            $("#general i .counter").text(' ');
        }
    };

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

    $('.select_all').change(function() {
                var checkthis = $(this);
                var checkboxes = $("#general-content input:checkbox");

                if (checkthis.is(':checked')) {
                    checkboxes.prop('checked', true);
                } else {
                    checkboxes.prop('checked', false);
                }
                fnUpdateCount();
            });
});

Demo: Fiddle

1
我在以上所有答案中发现缺少关于如何高效地监听点击的解释，因为问题与onChange事件紧密耦合。另一件事是问题没有指定代码应该只使用Jquery，我认为添加纯JS解决方案应该是一个好主意。
这是我将要计数的复选框的HTML列表。我以稍微通用的方式处理问题，以便更容易地适用于不同的情况。我计划全局和每个部分计算复选框的数量。
<div class="wrapper">
  <section class="list list-1">
    <label for="id-11"><input type="checkbox" id="id-11"></label>
    <label for="id-12"><input type="checkbox" id="id-12"></label>
    <label for="id-13"><input type="checkbox" id="id-13"></label>
    <label for="id-14"><input type="checkbox" id="id-14"></label>
    <label for="id-15"><input type="checkbox" id="id-15"></label>
    <label for="id-16"><input type="checkbox" id="id-16"></label>
    <label for="id-17"><input type="checkbox" id="id-17"></label>
    <label for="id-18"><input type="checkbox" id="id-18"></label>
    <label for="id-19"><input type="checkbox" id="id-19"></label>
    <label for="id-110"><input type="checkbox" id="id-110"></label>
    <span class="list-score">Section 1: <span class="number">0</span></span>
  </section>

  <section class="list list-2">
    <label for="id-21"><input type="checkbox" id="id-21"></label>
    <label for="id-22"><input type="checkbox" id="id-22"></label>
    <label for="id-23"><input type="checkbox" id="id-23"></label>
    <label for="id-24"><input type="checkbox" id="id-24"></label>
    <label for="id-25"><input type="checkbox" id="id-25"></label>
    <label for="id-26"><input type="checkbox" id="id-26"></label>
    <label for="id-27"><input type="checkbox" id="id-27"></label>
    <label for="id-28"><input type="checkbox" id="id-28"></label>
    <label for="id-29"><input type="checkbox" id="id-29"></label>
    <label for="id-210"><input type="checkbox" id="id-210"></label>
    <span class="list-score">Section 2: <span class="number">0</span></span>
  </section>

  <section class="list list-3">
    <label for="id-31"><input type="checkbox" id="id-31"></label>
    <label for="id-32"><input type="checkbox" id="id-32"></label>
    <label for="id-33"><input type="checkbox" id="id-33"></label>
    <label for="id-34"><input type="checkbox" id="id-34"></label>
    <label for="id-35"><input type="checkbox" id="id-35"></label>
    <label for="id-36"><input type="checkbox" id="id-36"></label>
    <label for="id-37"><input type="checkbox" id="id-37"></label>
    <label for="id-38"><input type="checkbox" id="id-38"></label>
    <label for="id-39"><input type="checkbox" id="id-39"></label>
    <label for="id-310"><input type="checkbox" id="id-310"></label>
    <span class="list-score">Section 3: <span class="number">0</span></span>
  </section>

  <span class="total-score">Total: <span class="number">0</span></span>
</div>

以下是JS标记，它监听 .wrapper div 中所有点击事件，并计算在 .wrapper 和每个 .list 部分上下文中选择的输入数量。

const total = document.querySelector('.total-score .number')

document.querySelector('.wrapper').addEventListener('change', function(event) { // First we apply the ONLY one listener to do the listening for us - we don't need listener on each checkbox
  const numberAll = this.querySelectorAll('input[type="checkbox"]:checked').length // We count all selected inputs in side the main wrapper. 
  total.innerHTML = numberAll // We update the total counter

  const list = event.target.closest('.list') // We look and cache the closest section, wrapping the clicked checkbox element
  const numberList = list.querySelectorAll('input[type="checkbox"]:checked').length // Once found, we start to count the number of selected checboxes under the section
  list.querySelector('.list-score .number').innerHTML = numberList // We update the sectiona relevant counter
})

这是JS fiddle中的实时示例： https://jsfiddle.net/mkbctrlll/yak4oqj9/159/ 在Vanilla JS中，你必须意识到为每个复选框应用change监听器会导致速度变慢。相反，你应该利用所谓的事件委托，将监听器应用于包装元素甚至整个文档。
在这里，你可以自己检查，在列表中每个输入监听change有多慢：

https://jsperf.com/change-listener-on-each-vs-event-delegation/1

较慢选项的代码（仅用于比较）：

document.querySelector('.wrapper').addEventListener('change', function() {
    const numberAll = this.querySelectorAll('input[type="checkbox"]:checked').length
    total.innerHTML = numberAll
  })

document.querySelectorAll('.list').forEach((list) => {
  list.addEventListener('change', function() {
    const numberAll = this.querySelectorAll('input[type="checkbox"]:checked').length
    this.querySelector('.list-score .number').innerHTML = numberAll
  })
})

我的jQuery解决方案：

$('.wrapper').change(function() {
  const numberAll = $(this).find('input[type="checkbox"]:checked').length
  total.innerHTML = numberAll

  const $list = $(event.target).closest('.list')
  const numberList = $list.find('input[type="checkbox"]:checked').length
  $($list.find('.list-score .number')).html(numberList)
})

顺便说一句，我尝试了使用jQuery解决方案进行基准测试，但它的性能似乎是虚假的，所以我决定不使用它。

0

试一下。

$('.select_all').change(function() {
var num = $(this).find("input[name='wpmm[]']:checked").length;
$("#general .counter").html(num);
});
0
修改了select all处理程序以触发子类别复选框的onchange函数，如下所示。
$(function() {
    $('.select_all').change(function() {
        var checkthis = $(this);
        var checkboxes = $(this).parent().next('ul').find("input[name='wpmm[]']");

        if(checkthis.is(':checked')) {
            checkboxes.attr('checked', true);
        } else {
            checkboxes.attr('checked', false);
        }
        // make sure to trigger the onchange behaviour for the checkboxes
        $("#general-content input:checkbox").change();
    });
})

我记得有一种更美观的方法来触发它们，但是找不到了。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接