我如何计算然后显示选中的特定复选框，但不是全部显示在 web 表单上

Question

我在一个表单上有多个复选框，并且我已经有了代码来计算选中的数量（请参阅 function showChecked）。 我现在要做的是计算选中了多少个“命名”框。 例如，我想知道“chk011”、“chk021”和“chk033”中有多少被选中，但我不关心其他有多少被选中（即忽略“chk001”、“ chk031”和“chk032”）。 然后以不同的“结果”返回该值。 这是我当前的代码...

<style>
        div.floater {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            left: 65%;
            width: 200px;
            padding: 5px;
            background-color: #cae8ca;
            border: 2px solid #4CAF50;
        }
</style>
        
<script>
    showChecked();
    function showChecked(){ document.getElementById("result").textContent =
"Completed = " + ((document.querySelectorAll("input:checked").length/62)*100).toFixed(0) +
'%'; }
</script>
        
</head>
<body>
    <div class="floater"><p id="result" align="center">Completed = 0%</p></div>
        <input type="checkbox" name="chk001" onclick="changeColor(); showChecked()"
        <input type="checkbox" name="chk011" onclick="changeColor(); showChecked()"
        <input type="checkbox" name="chk021" onclick="changeColor(); showChecked()"
        <input type="checkbox" name="chk031" onclick="changeColor(); showChecked()"
        <input type="checkbox" name="chk032" onclick="changeColor(); showChecked()"
        <input type="checkbox" name="chk033" onclick="changeColor(); showChecked()"

Answer 1

您可以将要检查的名称存储在数组中，然后在 function、select 中所有检查的输入并使用filter过滤掉names数组不包含其name属性的名称，然后获取结果数组的长度.

 const named = ["chk011", "chk021", "chk033"] showChecked(); function showChecked() { document.getElementById("result").textContent = "Completed = " + ((document.querySelectorAll("input:checked").length / 62) * 100).toFixed(0) + '%'; const namedChecked = [...document.querySelectorAll("input:checked")].filter(e => named.includes(e.name)).length; console.log(namedChecked); }

 div.floater { position: -webkit-sticky; position: sticky; top: 0; left: 65%; width: 200px; padding: 5px; background-color: #cae8ca; border: 2px solid #4CAF50; }

 <div class="floater"> <p id="result" align="center">Completed = 0%</p> </div> <input type="checkbox" name="chk001" onclick="showChecked()"> <input type="checkbox" name="chk011" onclick="showChecked()"> <input type="checkbox" name="chk021" onclick="showChecked()"> <input type="checkbox" name="chk031" onclick="showChecked()"> <input type="checkbox" name="chk032" onclick="showChecked()"> <input type="checkbox" name="chk033" onclick="showChecked()">

我如何计算然后显示选中的特定复选框，但不是全部显示在 web 表单上

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-08-25 17:06:42

我如何计算然后显示选中的特定复选框，但不是全部显示在 web 表单上

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-08-25 17:06:42

解决方案1
1 已采纳 2021-08-25 17:06:42