如何计算表单中的所有复选框（Javascript）

Question

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.

Answer 1

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 compute 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>

Answer 2

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);

Answer 3

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.

Answer 4

you could use jquery

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

alert(len);

WORKING DEMO

Answer 5

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

将使用jQuery为您提供表单中的所有复选框。

Answer 6

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.

Answer 7

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.