首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在同一页上的多个位置显示总复选框计数

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

Stack Overflow用户
提问于 2018-07-30 02:00:26
回答 3查看 33关注 0票数 0

我正在使用下面的代码来计算复选框并显示总计数及其正常工作。但现在我想在同一页上显示两个不同位置的总计数,但它不起作用。我做错了什么?

代码语言: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>
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-07-30 02:06:46

两个result具有相同的id。更改第二个参数的id并设置它的值。你也可以把它清理干净,但我相信这应该会让你继续下去。

代码语言:javascript
复制
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();
 }
});
代码语言:javascript
复制
    <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"/>

票数 1
EN

Stack Overflow用户

发布于 2018-07-30 02:09:08

代码语言:javascript
复制
<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"/>

_

代码语言:javascript
复制
function showChecked() {
  [...document.getElementsByClassName("result")].forEach(
    el => el.textContent = "Total Number of Items Selected = " + 
          document.querySelectorAll("input:checked").length
  );
}
票数 0
EN

Stack Overflow用户

发布于 2018-07-30 02:20:23

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

代码语言:javascript
复制
<!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>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51583092

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档