如何使用JavaScript统计表单中勾选的复选框数量？

你可以用下面这个通用的jQuery脚本来统计已勾选的复选框数量，并自动更新到numberticked字段中，后续添加更多复选框也无需修改脚本：

完整代码 #

$(document).ready(function() {
    // 定义统计并更新数量的函数
    function updateTickedCount() {
        // 统计所有值为true的复选框数量（ID符合checkboxcheckboxX格式）
        const checkedCount = $('input[type="checkbox"][id^="checkboxcheckbox"]').filter(function() {
            return $(this).val() === 'true';
        }).length;
        
        // 也可以通过对应的hidden字段统计（二选一即可）
        // const checkedCount = $('input[type="hidden"][id^="checkbox"]').filter(function() {
        //     return $(this).val() === 'true';
        // }).length;
        
        // 更新结果到numberticked输入框
        $('#numberticked').val(checkedCount);
    }

    // 给所有目标复选框绑定点击事件，兼容你原有的切换逻辑
    $('input[type="checkbox"][id^="checkboxcheckbox"]').click(function() {
        const checkbox = $(this);
        // 找到对应的hidden字段（比如checkboxcheckbox1对应checkbox1）
        const hiddenInput = $('#' + checkbox.attr('id').replace('checkboxcheckbox', ''));
        
        // 保留你原有的状态切换逻辑
        if (checkbox.val() === 'true') {
            hiddenInput.val('false');
            checkbox.val('false');
            checkbox.prop('checked', false);
        } else {
            hiddenInput.val('true');
            checkbox.val('true');
            checkbox.prop('checked', true);
        }
        
        // 每次切换后更新统计数量
        updateTickedCount();
        // 保留原有的预览刷新触发
        $('#aspire_previewrefresh').trigger('click');
    });

    // 页面加载完成后先统计一次，确保初始值正确
    updateTickedCount();
});

代码说明 #

• 批量适配：用[id^="checkboxcheckbox"]选择器自动匹配所有ID以checkboxcheckbox开头的复选框，后续新增复选框只要遵循这个命名规则，就会自动被纳入统计。
• 两种统计方式：
  1. 直接统计复选框的value为true的数量
  2. 统计对应的hidden字段（如checkbox1）value为true的数量
     两种方式结果一致，选你觉得更适配现有逻辑的即可。
• 兼容原有代码：完全保留了你原来的复选框状态切换逻辑，只是在每次操作后调用统计函数，不会破坏现有功能。
• 初始化处理：页面加载时自动执行一次统计，避免numberticked字段初始为空。

注意事项 #

• 新增复选框时，保证复选框ID为checkboxcheckboxX，对应的hidden字段ID为checkboxX，脚本无需修改。
• 如果不需要触发预览刷新，可以删除$('#aspire_previewrefresh').trigger('click');这一行。

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