How to read all checkboxes in a form (Javascript)

Question

I have a number of checkboxes that are generated dynamically. Therefore, I do not know how many control fields are generated each time. I need to have some JavaScript methods to count the total number of checkboxes 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 cannot change the name of the flags, because I need to send the values ​​to the server-side PHP script as an array.

Answer 1

Since all the other answers are based on jquery, I offer a clean JavaScript solution. Assuming the following view:

 <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 can calculate 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 must be unique in the document. I omitted your id="1" attributes in my HTML example above.

Update:

If you just want to read all the checkbox elements throughout the page without using the 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 regular 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 need a specific form, you will need to select the form and use it as the base for your call to query SelectorAll instead of the 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 new browsers, starting with: Internet Explorer 8, Firefox 3.5, Safari 3.1, Chrome 1, and Opera 10.

Answer 4

you can use jquery

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

WORKING DEMO

Answer 5

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

Gives you all the checkboxes on the form using jQuery.

Answer 6

As you noted your question using php , and you seem to be using some numbering already for the form fields, you can also just echo that php counter for the 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 per page, and it cannot start with a number.

Answer 7

If you have jQuery you can do something like

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

If not, then you will need document.getElementsByTagName ('input') , iterate over the collection you are returning, and increment the counter every time you encounter it, with the type attribute set to the checkbox.