как считать все флажки в форме (Javascript)

Поскольку все остальные ответы основаны на jquery, я предлагаю чистое решение для JavaScript. Предполагая следующую форму:

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

Вы можете вычислить количество элементов флажка со следующей логикой:

 <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: Как отмечали другие, атрибут id в любом теге HTML должен быть уникальным в документе. В моем примере HTML я опустил атрибуты id="1" .

Обновить:

Если вы просто хотите считать все элементы флажка на всей странице без использования содержащего элемента формы, это должно работать:

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

В обычном 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); 

Я бы пошел с:

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

Если вам нужна конкретная форма, вам нужно будет выбрать форму и использовать ее в качестве базы для своего запроса на запросSelectorAll вместо документа или изменить селектор, чтобы включить форму.

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

Затем используйте:

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

Примечание. API Selectors доступен только в новых браузерах, начиная с: Internet Explorer 8, Firefox 3.5, Safari 3.1, Chrome 1 и Opera 10.

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

Дает вам все флажки в форме, используя jQuery.

Поскольку вы отметили свой вопрос с помощью php и вы, похоже, используете некоторую нумерацию уже для полей формы, вы также можете просто echo этот счетчик php на переменную javascript:

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

Кстати, в html у вас может быть только один id на странице, и он не может начинаться с числа.

вы можете использовать jquery

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

РАБОЧАЯ ДЕМО

если у вас есть jQuery, вы можете сделать что-то вроде

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

Если нет, вам нужно будет document.getElementsByTagName ('input') , повторить выбор из коллекции, которую вы получите, и увеличивать счетчик каждый раз, когда вы сталкиваетесь с ним, с установленным для него атрибутом type.