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

Question

У меня есть количество флажков, которые генерируются динамически. Так что я не знаю, сколько флажков генерируется каждый раз. Мне нужно иметь несколько способов JavaScript подсчитать общее количество флажков в форме.

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

Я не могу изменить имя флажков, так как мне нужно отправить значения на серверный PHP-скрипт в виде массива.

Answer 1

Поскольку все остальные ответы основаны на 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>

Кстати: как уже отмечали другие, атрибут id в любом HTML-теге должен быть уникальным в документе. Я опустил ваши атрибуты id="1" в моем примере HTML выше.

Обновление:

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

<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

Я бы пошел с:

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

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

<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 селекторов доступен только в новых браузерах, начиная с: Internet Explorer 8, Firefox 3.5, Safari 3.1, Chrome 1 и Opera 10.

Answer 3

На обычном 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 4

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

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

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

Answer 5

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

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

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

Answer 6

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

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

Answer 7

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

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

alert(len);

РАБОЧИЙ ДЕМО