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>

BTW：正如其他人所说，任何HTML标记中的id属性在文档中都应该是唯一的。我在上面的示例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>

Answer 2

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

我会选择：

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

注意：Selectors API仅适用于较新的浏览器：Internet Explorer 8，Firefox 3.5，Safari 3.1，Chrome 1和Opera 10.

Answer 4

你可以使用jquery

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

alert(len);

WORKING DEMO

Answer 5

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

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

Answer 6

当你用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 7

如果你有jQuery，你可以做类似

的事情

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

如果没有，那么你必须document.getElementsByTagName ('input')，迭代你回来的集合并在每次遇到一个其类型属性设置为复选框的计数器时递增一个计数器。

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

7 个答案:

更新