时间戳

首页 > 解决方案 > 在同一页面上的多个位置显示复选框总数

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>

标签： javascriptcheckbox

解决方案

你id对两者都一样result。更改id第二个并设置其值。你也可以把它清理干净，但我相信这会让你继续前进。

showChecked();
function showChecked(){
   var length = document.querySelectorAll("input:checked").length,		
       text = "Total Number of Items Selected = ",
       results = document.getElementsByClassName("result"),
       total = 0

   Array.prototype.forEach.call(results, function(r){
       r.textContent = text + length
       total = total + length
   })
		
   document.getElementById("final").value = total;
}
  document.querySelectorAll("input[type=checkbox]").forEach(i=>{
     i.onclick = function(){
     showChecked();
 }
});
    <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="final" name="total" placeholder="show total count"/>

推荐阅读