Javascript 显示同一页面上多个位置的总复选框计数

我正在使用以下代码对复选框进行计数，并显示总计数及其工作罚款。但现在我想在同一页上的两个不同位置显示总计数，但它不起作用。我做错了什么

    <input type="checkbox" name="E33" />A
    <input type="checkbox" name="E34" />B
    <input type="checkbox" name="E66" />C

    <p id="result">Total Number of Items Selected = <p>
    <p id="result">Total Number of Items Selected = <p>

    *also show total count inside the text input 
    <input type="text" id="result" name="total" placeholder="show total count"/>



<script>
showChecked();
function showChecked(){
  document.getElementById("result").textContent = "Total Number of Items Selected = " + document.querySelectorAll("input:checked").length;
}
document.querySelectorAll("input[type=checkbox]").forEach(i=>{
 i.onclick = function(){
  showChecked();
 }
});
</script>

A
B
C
所选项目总数=
所选项目总数=
*还显示文本输入中的总计数
showChecked（）；
函数showChecked（）{
document.getElementById（“结果”）.textContent=“所选项目总数=“+document.querySelectorAll（“输入：已选中”）.length；
}
document.querySelectorAll（“输入[type=checkbox]”）。forEach（i=>{
i、 onclick=function（）{
showChecked（）；
}
});

两个

结果都有相同的
id
。更改第二个id的
id
，并设置其值。你也可以把它清理干净，但我相信这会让你走的更远


showChecked（）；
函数showChecked（）{
var length=document.queryselectoral（“输入：选中”）.length，
text=“所选项目总数=”，
结果=document.getElementsByClassName（“结果”），
总数=0
Array.prototype.forEach.call（结果，函数（r）{
r、 text内容=文本+长度
总计=总计+长度
})
document.getElementById（“最终”）。值=总计；
}
document.querySelectorAll（“输入[type=checkbox]”）。forEach（i=>{
i、 onclick=function（）{
showChecked（）；
}
});
A
B
C
所选项目总数=
所选项目总数=
*还显示文本输入中的总计数
将输入放在两个不同的div组中



A.
B
C
A.
B
C
所选项目的总数=
所选项目总数=
*还显示文本输入中的总计数
showChecked（）；
函数showChecked（）{
var countA=document.getElementById（“placeA”）.queryselectoral（“输入：选中”）.length；
document.getElementById（“resultA”）.textContent=“所选项目总数=“+countA；
var countB=document.getElementById（“placeB”）.queryselectoral（“输入：选中”）.length；
document.getElementById（“resultB”）.textContent=“所选项目总数=“+countB；
document.getElementById（“结果”）.value=countA+countB；
}
document.querySelectorAll（“输入[type=checkbox]”）。forEach（i=>{
i、 onclick=function（）{
showChecked（）；
}
});
您有3个id=“result”。Id必须是唯一的。谢谢@Akrion，但总计数没有显示在文本输入中？抱歉，跳过了。修好了。你可以把它修改得更干净、更好，我只是想给你一些东西让你快点走。我再次更新了它，使它更干净，更少依赖于
结果
ID。希望这有帮助。
<input type="checkbox" name="E33" />A
<input type="checkbox" name="E34" />B
<input type="checkbox" name="E66" />C

<p class="result">Total Number of Items Selected = <p>
<p class="result">Total Number of Items Selected = <p>

*also show total count inside the text input 
<input type="text" id="result" name="total" placeholder="show total count"/>

function showChecked() {
  [...document.getElementsByClassName("result")].forEach(
    el => el.textContent = "Total Number of Items Selected = " + 
          document.querySelectorAll("input:checked").length
  );
}