Count and show total number of checkboxes selected by user

[gcommercepk]

I’m creating an HTML form and want to achieve the following with JS, please provide the code i should use.

1. Show total number of checkboxes user has selected.
2. Add values of all the checked checkboxes and show them as total.
3. Add a restriction the user must select at least 2 checkboxes

Here is my code.

<input class="iput" type="checkbox" name="E33" value="4500" />
<input class="iput" type="checkbox" name="E34" value="3000" />
<input class="iput" type="checkbox" name="E36" value="6000" />

<p>Total number of items selected = </p> 
<p>Your Total is = </p>

Also code should not be dependent on the number of checkboxes, i mean to say that if i create new checkboxes i should not have to change the JS code too. The JS code should check all checkboxes on the page automatically even if there are 50 checkboxes.

Thanks in advance.

[mawburn]

This sounds like homework, what have you tried?

[gcommercepk]

Currently i have only achieved the 1st part i.e i am able to count and show the total number of checboxes that are checked using this code :

<input type="checkbox" name="fruit" />A
<input type="checkbox" name="fruit" />B
<input type="checkbox" name="fruit" />C

<p id="result">Total Number of Items Selected = <p>  
<script>
showChecked();
function showChecked(){
  document.getElementById("result").textContent = "Total Number of Items Selected = " + document.querySelectorAll("input:checked").length;
}
document.querySelectorAll("input[name=fruit]").forEach(i=>{
 i.onclick = function(){
  showChecked();
 }
});
</script>

But i still need to figrue out how to :
Add values of all the checked checkboxes and show them as total.
Add a restriction the user must select at least 2 checkboxes

[mawburn]

Sorry for the delayed response.

To get the count of the checked boxes, you simply just need to use that in your query string.

 document.querySelectorAll('input[name=fruit]:checked').length

Something like this: http://jsfiddle.net/s5jua0bx/2/

<input type="checkbox" name="fruit" />A
<input type="checkbox" name="fruit" />B
<input type="checkbox" name="fruit" />C

<div id="result">Total Number of Items Selected = <span id="selected">0</span></div>  

I also moved the number to a span that only contains what needs to be changed, instead of appending to the entire string every time.

function showChecked(){
  document.getElementById('selected').innerHTML = getCheckBoxCount();
}

function getCheckboxCount() {
  return document.querySelectorAll('input[name=fruit]:checked').length;
}

document.querySelectorAll("input[name=fruit]").forEach(i=>{
 i.onclick = () => showChecked();
});

Then to do a restriction, you just need to if(getCheckboxCount() < 2) { // do error }.

[gcommercepk]

Sorry for the late reply. But its working thanks !

[gcommercepk]

I want to hide div.cart if the total number of checkboxes selected on the page are less than 2. Is this achievable via CSS along or would i need JS for that ?

[mawburn]

You need both.

if(getCheckBoxCount() < 2) {
    // do stuff
    document.querySelectorAll(divSelector).style.display = 'none'
}