使用jQuery操作复选框实现选中数量统计的代码求助

核心实现逻辑采用事件委托机制，将复选框的状态监听绑定到全局document对象上，无需等待DOM加载完成即可绑定生效，完全规避jQuery的document ready方法，同时兼容页面初始加载时的状态统计。

// 绑定change事件到document，委托给所有复选框元素，无需等待DOM就绪即可生效
$(document).on('change', 'input[type="checkbox"]', function() {
  // 统计当前选中的复选框总数
  const checkedCount = $('input[type="checkbox"]:checked').length
  // 将结果写入id为result的展示容器
  $('#result').text(`已选中复选框数量：${checkedCount}`)
})

// 使用原生DOMContentLoaded事件触发初始状态统计，不使用jQuery的ready方法
document.addEventListener('DOMContentLoaded', function() {
  const initCount = $('input[type="checkbox"]:checked').length
  $('#result').text(`已选中复选框数量：${initCount}`)
})

方案符合要求说明 #

• 无需修改chkbox.html的任何原有内容，所有逻辑均编写在chkbox.js中
• 全程未使用$(document).ready()、$(function(){})这类jQuery的DOM就绪方法
• 事件委托机制保证了无论JS文件引入位置在HTML头部还是尾部，都能实时监听到复选框的选中状态变化，自动更新计数
• 初始状态统计逻辑兼容页面加载时默认选中的复选框场景，不会出现初始加载时结果容器为空的问题

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