使用jQuery统计已勾选复选框并计算占比的实现问题

核心问题就是选择器范围太广，误选中了其他带.flat类的元素，下面给你两种精准定位目标复选框的方案，再配合计算逻辑实现占比显示：

方案一：利用父元素层级缩小选择范围 #

既然目标复选框都在<div class="item form-group">下面，我们可以通过父元素层级来精准选中它们，避免全局匹配.flat：

完整实现代码 #

// 页面加载完成后初始化
$(document).ready(function() {
    // 先计算一次初始状态（默认全选，显示100%）
    updatePercentage();

    // 监听目标复选框的状态变化
    $('.item.form-group input[type="checkbox"].flat').on('change', function() {
        updatePercentage();
    });

    // 核心计算函数
    function updatePercentage() {
        // 动态获取目标复选框总数（也可以直接写6，固定数量的话更高效）
        const total = $('.item.form-group input[type="checkbox"].flat').length;
        // 统计选中的数量
        const checked = $('.item.form-group input[type="checkbox"].flat:checked').length;
        // 计算占比并格式化（保留1位小数，符合你要的83.4%格式）
        const percentage = ((checked / total) * 100).toFixed(1) + '%';
        // 把结果更新到显示元素里，这里假设显示元素的id是percentage-display，按需修改
        $('#percentage-display').text(percentage);
    }
});

方案二：给目标复选框添加专属标识（更健壮） #

如果担心以后父元素结构变动导致选择器失效，建议给这6个复选框加个专属的data属性，比如data-purpose="calc-percent"：

修改后的HTML片段示例 #

<div class="item form-group">
    <input type="checkbox" class="flat" data-purpose="calc-percent" checked>
    <!-- 其他5个复选框同理加上data-purpose属性 -->
</div>

对应的jQuery代码 #

只需要把选择器换成带data属性的版本即可，其余逻辑不变：

$(document).ready(function() {
    updatePercentage();

    $('input[type="checkbox"].flat[data-purpose="calc-percent"]').on('change', updatePercentage);

    function updatePercentage() {
        const total = $('input[type="checkbox"].flat[data-purpose="calc-percent"]').length;
        const checked = $('input[type="checkbox"].flat[data-purpose="calc-percent"]:checked').length;
        const percentage = ((checked / total) * 100).toFixed(1) + '%';
        $('#percentage-display').text(percentage);
    }
});

注意事项 #

1. 如果你用来显示占比的元素不是id选择器，记得把$('#percentage-display')换成对应的class或其他选择器
2. 如果页面中有多个.item.form-group容器，建议给目标容器加个专属id（比如id="calc-checkbox-group"），然后选择器写成$('#calc-checkbox-group input[type="checkbox"].flat')，范围更精准
3. toFixed(1)会保留1位小数，如果你不需要小数（比如取消一个显示83%），可以改成toFixed(0)

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