如何计算表单中的所有复选框(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/>

我无法更改复选框的名称,因为我需要将值作为数组发送到serverside 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>