CODEWITHSUNDEEP
javascript
Suman
Suman

Reputation: 5

How to get the numbers of CheckBox checked in JavaScript?

I am writing this code, but unable to get anything. Any help is appreciated.

<!DOCTYPE HTML>
   <html>
     <head>
       <script>
         function computeMarks() {
           var inputElems = document.form1.getElementsByTagName("input");
           var count = 0;
           for (var i =0; i<=inputElems.length; i++) {
             if(inputElems[i].type === "checkbox" && inputElems[i].checked) {
               count++;
             }
           }
           alert(count);
         }
       </script>
     </head>
     <body>
       <form name="form1" id="form1">
         <input type="checkbox" name="quiz" value=1 /> Hi
         <input type="checkbox" name="quiz" value=1 /> Bye
         <input type="checkbox" name="quiz" value=1 /> See ya
         <input type="button" onClick="computeMarks()" value="Compute Marks"/>
       </form>
     </body>
   </html>

I have tried to do getElementByName("quiz") but the same thing is happening.

Upvotes: 0

Views: 178

Answers (5)

elclanrs
elclanrs

Reputation: 94101

I would recommend you query the elements, and add the event in JavaScript, for example:

var form = document.form1
var button = form.querySelector('[type="button"]')
var checkboxes = form.querySelectorAll('[type="checkbox"]')

var computeMarks = function(els) {
  return []
    .map.call(els, function(x){return +x.checked})
    .reduce(function(x, y){return x + y})
}

button.addEventListener('click', function() {
  alert(computeMarks(checkboxes))
})

Demo: http://jsfiddle.net/u59c3d1L/2/

Upvotes: 0

Abdul Jabbar
Abdul Jabbar

Reputation: 2573

You can get the reference of the form and loop through it's elements to see if they are checked or not, simply replace your function with this and it should work:

function computeMarks() {
    var checked = 0;
    var form = document.getElementById("form1");
           var index, element;
    for (index = 0; index < form.elements.length; ++index) {
        element = form.elements[index];
        // You may want to check `element.name` here as well
        if (element.type.toUpperCase() == "CHECKBOX" && element.checked) 
            ++checked;

    }
    alert(checked);
}

See the DEMO here

Upvotes: 0

Barmar
Barmar

Reputation: 781058

Change i<=inputElems.length to i < inputElems.length. Array indexes run from 0 to length-1. You're getting an error when i is inputElements.length (when your scripts don't work, isn't the Javascript console the first place you look for help?).

DEMOenter link description here

Upvotes: 2

Ankit Tyagi
Ankit Tyagi

Reputation: 2375

Well what you need to do is just remove = sign from <= in your code.

<!DOCTYPE HTML>
<html>
     <head>
       <script>
         function computeMarks() {
           var inputElems = document.form1.getElementsByTagName("input");
           var count = 0;
           for (var i =0; i<inputElems.length; i++) {
             if(inputElems[i].type === "checkbox" && inputElems[i].checked) {
               count++;
             }
           }
           alert(count);
         }
       </script>
     </head>
     <body>
       <form name="form1" id="form1">
         <input type="checkbox" name="quiz" value=1 /> Hi
         <input type="checkbox" name="quiz" value=1 /> Bye
         <input type="checkbox" name="quiz" value=1 /> See ya
         <input type="button" onClick="computeMarks()" value="Compute Marks"/>
       </form>
     </body>
   </html>

Upvotes: 1

S.Pols
S.Pols

Reputation: 3434

I recommand the JQuery to do this, it's way easier. Here is an example if you use JQuery in your code instead of plain javascript:

<!DOCTYPE HTML>
   <html>
     <head>
       <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
       <script>
         function computeMarks() {

           var counter = 0;
           $('input[type="checkbox"]').each(function(){
                if($(this).prop('checked'))
                {
                    counter++;
                }
           });

           alert(counter);
         }
       </script>
     </head>
     <body>
       <form name="form1" id="form1">
         <input type="checkbox" name="quiz" value=1 /> Hi
         <input type="checkbox" name="quiz" value=1 /> Bye
         <input type="checkbox" name="quiz" value=1 /> See ya
         <input type="button" onClick="computeMarks()" value="Compute Marks"/>
       </form>
     </body>
   </html>

Upvotes: 0

Related Questions