Show total checkbox count on multiple locations on the same page
Clash Royale CLAN TAG#URR8PPPShow total checkbox count on multiple locations on the same page
Im am using the following code to count the check boxes and display the total count and its working fine. But now i want to display the total count on two different locations on the same page, but it does not work. What am i doing wrong ?
<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 Answers
3
You have the same id for both result. Change the id for the second one and set its value as well. You can also clean this up but I am sure that should get you going.
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"/>
Thanks @Akrion but the total count is not showing inside the text input ?
– Sali
29 mins ago
Sorry skipped over that. Fixed it. You can rework this to be cleaner and nicer I just wanted to give you something quickly to get you going.
– Akrion
23 mins ago
I updated it again to something more cleaner and less depended on the
result ids. Hope this helps.– Akrion
3 mins ago
result
<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
);
}
the code you mentioned is not working at all.
– Sali
31 mins ago
jsfiddle.net/1va5t47y
– Artur
26 mins ago
put inputs in two different div groups
<!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>
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
you have 3 id="result". Id must be unique.
– VolArt
40 mins ago