如何使用jQuery统计表格中被选中的checkbox输入框数量

• 冗余代码：你代码里的let len = nbchecked.length;是无效代码，nbchecked本身就是jQuery筛选后拿到的已勾选元素的数量，属于Number类型，不存在length属性，不过这行没有被后续调用，不会直接导致功能失效。
• 核心失效原因通常有两类：
  1. 代码执行时DOM还没加载完成，绑定事件的时候找不到对应的checkbox元素
  2. 表格里的checkbox是动态渲染生成的（比如后端接口返回数据后才插入到页面的），初始绑定事件的时候这些元素还不存在，事件没有绑定成功

修复方案 #

情况1：checkbox是页面初始就存在的静态元素 #

把代码包裹在jQuery的DOM就绪回调中，保证元素加载完成后再绑定事件：

$(function() {
  $("table input[type=checkbox]").click(function(){
    const nbchecked = $("table input[type='checkbox']:checked").length;
    $(".counter").html(nbchecked);
  });
})

情况2：checkbox是动态生成的元素 #

用事件委托的方式绑定，把事件绑定到已经存在的父级元素（示例用table，也可以是document等更上层的已有元素）上，这样后续动态插入的checkbox也能触发事件：

$(function() {
  $("table").on("click", "input[type=checkbox]", function(){
    const nbchecked = $("table input[type='checkbox']:checked").length;
    $(".counter").html(nbchecked);
  });
})

额外排查点 #

• 确认页面已经正确引入jQuery库，且引入位置在你的业务代码之前
• 确认页面存在class为counter的元素，拼写没有错误
• 确认你的表格选择器table可以正确匹配到你要操作的表格，如果表格有特定id或者class，建议用更精确的选择器，避免匹配到页面其他表格

内容的提问来源于stack exchange，提问作者Lucas56