CODEWITHSUNDEEP
javascripthtmlformscheckboxonchange
roro
roro

Reputation: 723

Count the number of checked checkboxes in HTML

So basically i want to count the number of checkboxes that are ticked. I get my code to the point where it counts them successfully, but I want to put in an alert that shows the number of checkboxes ticked, the code does this but doesn't show the total count, it increments the total every refresh. I just want to know how I can show a total count.

It should display the total when the radio button 'yes' is clicked. 

<br />Apples
<input type="checkbox" name="fruit" />Oranges
<input type="checkbox" name="fruit" />Mango
<input type="checkbox" name="fruit" />
<br />Yes
<input type="radio" name="yesorno" id="yes" onchange="checkboxes()"

function checkboxes(){
    var inputElems = document.getElementsByTagName("input"),
    count = 0;
    for (var i=0; i<inputElems.length; i++) {
    if (inputElems[i].type === "checkbox" && inputElems[i].checked === true){
        count++;
        alert(count);
    }
}}

Upvotes: 30

Views: 123111

Answers (7)

azhar
azhar

Reputation: 11

function checkboxes(){
    var inputs = document.getElementsByTagName("input");
    var inputObj;
  var selectedCount = 0;
    for(var count1 = 0;count1<inputs.length;count1++) {
        inputObj = inputs[count1];
        var type = inputObj.getAttribute("type");
        if (type == 'checkbox' && inputObj.checked) {
            selectedCount++;
        }
    }
  alert(selectedCount);
}
<html>
  <body>Fruits
  <br />
  <input type="checkbox" name="fruit" checked/>Oranges
  <input type="checkbox" name="fruit" />Mango
  <input type="checkbox" name="fruit" />Apple
  <br />Yes
  <input type="radio" name="yesorno" id="yes"       onClick="checkboxes();"/>
  </body>
</html>

Upvotes: 1

nicael
nicael

Reputation: 18995

var checkboxes = document.getElementsByName("fruit");
for(i = 0 ; i<checkboxes.length; i++)
{
if(checkboxes[i].checked==0){checkboxes.splice(i,1);}
}
alert("Number of checked checkboxes: "+checkboxes.length);

Upvotes: 1

Jon Flowers
Jon Flowers

Reputation: 31

The initial code was very nearly right. the line alert(count); was in the wrong place. It should have come after the second closing brace like this:-

 function checkboxes()
  {
   var inputElems = document.getElementsByTagName("input"),
    count = 0;

    for (var i=0; i<inputElems.length; i++) {       
       if (inputElems[i].type == "checkbox" && inputElems[i].checked == true){
          count++;
       }
    }
    alert(count);
 }

In the wrong place it was giving you an alert message with every checked box.

Upvotes: 3

MikeRG
MikeRG

Reputation: 71

Thanks to Marlon Bernardes for this. alert(document.querySelectorAll('input[type="checkbox"]:checked').length);

If you have more than one form with different checkbox names in each, the above code will count all checkboxes in all forms.

To get over this, you can modify it to isolate by name.

var le = document.querySelectorAll('input[name="chkboxes[]"]:checked').length;

Upvotes: 7

Marlon Bernardes
Marlon Bernardes

Reputation: 13853

This should do the trick:

alert(document.querySelectorAll('input[type="checkbox"]:checked').length);

Upvotes: 57

Girish
Girish

Reputation: 12117

Try this code

 <br />Apples
                <input type="checkbox" name="fruit" checked/>Oranges
                <input type="checkbox" name="fruit" />Mango
                <input type="checkbox" name="fruit" />

                <br />Yes
<input type="radio" name="yesorno" id="yes" onClick="checkboxes();" />

Javascript

     function checkboxes()
      {
       var inputElems = document.getElementsByTagName("input"),
        count = 0;

        for (var i=0; i<inputElems.length; i++) {       
           if (inputElems[i].type == "checkbox" && inputElems[i].checked == true){
              count++;
              alert(count);
           }

        }
     }

FIDDLE DEMO

Upvotes: 6

mohsinali1317
mohsinali1317

Reputation: 4425

try this using jquery

Method 1:

alert($('.checkbox_class_here :checked').size());

Method 2:

alert($('input[name=checkbox_name]').attr('checked'));

Method: 3

alert($(":checkbox:checked").length);

Upvotes: 23

Related Questions