在同一页上的多个位置显示总复选框计数
在同一页上的多个位置显示总复选框计数
提问于 2018-07-30 02:00:26
我正在使用下面的代码来计算复选框并显示总计数及其正常工作。但现在我想在同一页上显示两个不同位置的总计数，但它不起作用。我做错了什么？
<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>回答 3
Stack Overflow用户
回答已采纳
发布于 2018-07-30 02:06:46
两个result具有相同的id。更改第二个参数的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"/>
Stack Overflow用户
发布于 2018-07-30 02:09:08
<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
);
}Stack Overflow用户
发布于 2018-07-30 02:20:23
将输入放在两个不同的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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51583092
复制相关文章
相似问题
腾讯云开发者
