I have number of check boxes that gets generated dynamically. So i do not know how many check boxes gets generated each time. I need to have some JavaScript ways to count the total numbers of check boxes in a form.

 <input type="checkbox" value="username1" name="check[0]" id="1" /><br/>
 <input type="checkbox" value="userusername2" name="check[1]" id="1" /><br/>
 <input type="checkbox" value="userusername3" name="check[2]" id="1" /><br/>

I can not change the name of the check boxes as i need to send the values to serverside PHP script as an array.

I have number of check boxes that gets generated dynamically. So i do not know how many check boxes gets generated each time. I need to have some JavaScript ways to count the total numbers of check boxes in a form.

 <input type="checkbox" value="username1" name="check[0]" id="1" /><br/>
 <input type="checkbox" value="userusername2" name="check[1]" id="1" /><br/>
 <input type="checkbox" value="userusername3" name="check[2]" id="1" /><br/>

I can not change the name of the check boxes as i need to send the values to serverside PHP script as an array.

• php
• javascript
• ajax

• 6 Your ID attributes are invalid. They need to a) be unique, and b) start with a letter. – GordonM Commented Apr 25, 2011 at 14:38
• 2 the id attribute is designed to identify unique elements in an HTML document. You shouldn't be reusing '1' for an id attribute in each of your checkboxes. – Casey Flynn Commented Apr 25, 2011 at 14:39
• 1 i admit that i did mistake in putting id value, thanks for mentioning it :) – World Commented Apr 25, 2011 at 15:59

7 Answers 7

Since all other answers are jquery based, I'll offer a pure javascript solution. Assuming the following form:

<form id="myform">
    <input type="checkbox" value="username1" name="check[0]" /><br/>
    <input type="checkbox" value="userusername2" name="check[1]" /><br/>
    <input type="checkbox" value="userusername3" name="check[2]" /><br/>
</form>

You could pute the number of checkbox elements with the following logic:

<script type="text/javascript">
var myform = document.getElementById('myform');
var inputTags = myform.getElementsByTagName('input');
var checkboxCount = 0;
for (var i=0, length = inputTags.length; i<length; i++) {
     if (inputTags[i].type == 'checkbox') {
         checkboxCount++;
     }
}
alert(checkboxCount);
</script>

BTW: As others have noted, the id attribute in any HTML tag should be unique within the document. I've omitted your id="1" attributes in my sample HTML above.

Update:

If you simply want to count all checkbox elements on the entire page without using a containing form element, this should work:

<script type="text/javascript">
var inputTags = document.getElementsByTagName('input');
var checkboxCount = 0;
for (var i=0, length = inputTags.length; i<length; i++) {
     if (inputTags[i].type == 'checkbox') {
         checkboxCount++;
     }
}
alert(checkboxCount);
</script>

In Plain JavaScript:

var myForm = document.forms[nameOrIndex];
var inputs = myForm.getElementsByTagName('input');
var checkboxes = [];
for(var i=0;i<inputs.length;i++){
  if(inputs[i].getAttribute('type').toLowerCase() == 'checkbox'){
    checkboxes.push(inputs[i]);
  }
}
alert(checkboxes.length);

I would go with:

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

If you wanted a particular form you would need to select the form and use that as a base for your call to querySelectorAll instead of document or change the selector to include the form.

<form id="aForm">
    <input type="checkbox" value="userusername2" name="check[1]" id="1" /><br/>
    <input type="checkbox" value="userusername3" name="check[2]" id="1" /><br/>
</form>
<form id="bForm">
    <input type="checkbox" value="username1" name="check[0]" id="1" /><br/>
    <input type="checkbox" value="userusername2" name="check[1]" id="1" /><br/>
    <input type="checkbox" value="userusername3" name="check[2]" id="1" /><br/>
</form>

Then use:

alert(document.querySelectorAll("#aForm > input[type=checkbox]").length); //shows 2

alert(document.querySelectorAll("#bForm > input[type=checkbox]").length); //shows 3

Note: The Selectors API is only available in newer browsers starting with: Internet Explorer 8, Firefox 3.5, Safari 3.1, Chrome 1, and Opera 10.

alert( $("form input[type='checkbox']").length );

Will give you all the checkboxes in a form, using jQuery.

As you tagged your question with php and you seem to use some sort of numbering already for the form fields, you can also just echo that php counter to a javascript variable:

<?php
//
?>
<script language="javascript" type="text/javascript">
  var checkbox_counter = <?php echo $your_counter_in_php; ?>
</script>
<?php
//
?>

By the way, in html you can only have one id on a page and it can´t start with a number.

you could use jquery

var len = $('input:checkbox').length;

alert(len);

WORKING DEMO

if you have jQuery you could do something like

alert ($(':checkbox').length ());

If not then you'll have to document.getElementsByTagName ('input'), iterate over the collection you get back and increment a counter every time you encounter one with its type attribute set to checkbox.