Question

我正在使用以下代码对复选框进行计数，并显示总计数及其正常运行。但是现在我想在同一页面上的两个不同位置上显示总数，但这是行不通的。我究竟做错了什么？

    <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>

Answer 1

两个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"/>

this

Answer 2

<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
  );
}

Answer 3

将输入放入两个不同的div组

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    
	<div id="placeA">
		<input type="checkbox" name="E33" />A
		<input type="checkbox" name="E34" />B
		<input type="checkbox" name="E66" />C
	</div>
	
	<div id="placeB">
		<input type="checkbox" name="E37" />A
		<input type="checkbox" name="E38" />B
		<input type="checkbox" name="E69" />C
	</div>
	
    <p id="resultA">Total Number of Items Selected = <p>
    <p id="resultB">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(){
	var countA = document.getElementById("placeA").querySelectorAll("input:checked").length;
	document.getElementById("resultA").textContent = "Total Number of Items Selected = " + countA;
	
	var countB = document.getElementById("placeB").querySelectorAll("input:checked").length;
	document.getElementById("resultB").textContent = "Total Number of Items Selected = " + countB;
	
	document.getElementById("result").value = countA + countB;
}
document.querySelectorAll("input[type=checkbox]").forEach(i=>{
 i.onclick = function(){
  showChecked();
 }
});
</script>
	
</body>
</html>

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

3 个答案: