Skip to main content

Count the Number of Checkbox with Check Value Using Javascript


This tutorial will teach you on how to count the number of checkbox with checked value using Javascript. This is useful for thus programmer who is creating an online voting; by using this tutorial you can put a filter that allows only specific number of candidates to be vote in every position. To start this tutorial follow the steps bellow.

Creating Our Javascript

This step includes the creation of our Javascript that count the number of checkbox with check value. Copy the code bellow and save it as “index.html”.

  1. <script type="text/javascript">
  2. function UpdateCost() {
  3. var sum = 0;
  4. var gn, elem;
  5. for (i=0; i<10; i++) {
  6. gn = 'sum_m_'+i;
  7. elem = document.getElementById(gn);
  8. if (elem.checked == true) { sum += 1; }
  9. //if (elem.checked == true) { sum += Number(elem.value); }
  10. }
  11. document.getElementById('totalcost' ).value = sum.toFixed(0);
  12. }
  13. window.onload=UpdateCost
  14. </script>

Creating our Display

This step includes our code that display the checkbox and the result generate by our Javascript that count the number of checkbox with checked value. Copy the code bellow and paste it under our Javascript in “index.html”.

  1. <form>
  2. <INPUT TYPE="checkbox" NAME="count[]" value="1" id="sum_m_0" onclick="UpdateCost()" style="width: 21px;">Count 1<br>
  3. <INPUT TYPE="checkbox" NAME="count[]" value="1" id="sum_m_1" onclick="UpdateCost()" style="width: 21px;">Count 2<br>
  4. <INPUT TYPE="checkbox" NAME="count[]" value="1" id="sum_m_2" onclick="UpdateCost()" style="width: 21px;">Count 3<br>
  5. <INPUT TYPE="checkbox" NAME="count[]" value="1" id="sum_m_3" onclick="UpdateCost()" style="width: 21px;">Count 4<br>
  6. <INPUT TYPE="checkbox" NAME="count[]" value="1" id="sum_m_4" onclick="UpdateCost()" style="width: 21px;">Count 5<br>
  7. <INPUT TYPE="checkbox" NAME="count[]" value="1" id="sum_m_5" onclick="UpdateCost()" style="width: 21px;">Count 6<br>
  8. <INPUT TYPE="checkbox" NAME="count[]" value="1" id="sum_m_6" onclick="UpdateCost()" style="width: 21px;">Count 7<br>
  9. <INPUT TYPE="checkbox" NAME="count[]" value="1" id="sum_m_7" onclick="UpdateCost()" style="width: 21px;">Count 8<br>
  10. <INPUT TYPE="checkbox" NAME="count[]" value="1" id="sum_m_8" onclick="UpdateCost()" style="width: 21px;">Count 9<br>
  11. <INPUT TYPE="checkbox" NAME="count[]" value="1" id="sum_m_9" onclick="UpdateCost()" style="width: 21px;">Count 10<br>
  12. Result : <input type="text" name="sen" id="totalcost" value="">
  13. </form>

That’s all, make sure that you follow the steps properly in order to run this tutorial successfully.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.