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

how to count all check boxes in a form (Javascript)

本文关键字：复选框 Javascript 表单 何计算 计算      更新时间：2023-09-26

我有许多动态生成的复选框。所以我不知道每次生成多少个复选框。我需要一些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脚本。

由于所有其他答案都是基于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>

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

如果你想要一个特定的表单，你需要选择该表单，并将其作为调用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。

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')，迭代您返回的集合，并在每次遇到类型属性设置为复选框的集合时递增计数器。

相关文章：