如何统计并展示Web表单中指定的已勾选checkbox数量而非全部

直接修改showChecked函数，使用CSS多属性选择器过滤指定name的复选框即可，修改后的完整代码如下：

修改后的JS代码 #

showChecked();
function showChecked(){ 
    // 仅匹配指定name的已勾选复选框，后续新增统计项只需按格式在逗号后追加选择器
    const targetChecked = document.querySelectorAll(
      'input[name="chk011"]:checked, input[name="chk021"]:checked, input[name="chk033"]:checked'
    ).length;
    // 分母可按需调整：如果按指定3个复选框算完成率就填3，保留原全局总数量62也可自行修改
    const completedRate = ((targetChecked / 3) * 100).toFixed(0);
    document.getElementById("result").textContent = `Completed = ${completedRate}%`;
}

补充注意 #

你原代码中的<input>标签缺少闭合的>符号，会导致渲染异常，修正示例：

<input type="checkbox" name="chk001" onclick="changeColor(); showChecked()">
<input type="checkbox" name="chk011" onclick="changeColor(); showChecked()">
<!-- 其余input标签按上述格式补充闭合符号即可 -->

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