如何计算表单中的所有复选框（Javascript）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5779404/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to count all check boxes in a form (Javascript)
提问by World
I have number of check boxes that gets generated dynamically. So i do not know how many check boxes gets generated each time. I need to have some JavaScript ways to count the total numbers of check boxes in a form.
我有许多动态生成的复选框。所以我不知道每次生成多少个复选框。我需要一些 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/>
I can not change the name of the check boxes as i need to send the values to serverside PHP script as an array.
我无法更改复选框的名称，因为我需要将值作为数组发送到服务器端 PHP 脚本。
回答by Asaph
Since all other answers are jquery based, I'll offer a pure javascript solution. Assuming the following form:
由于所有其他答案都是基于 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>
You could compute the number of checkbox elements with the following logic:
您可以使用以下逻辑计算复选框元素的数量：
<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: As others have noted, the idattribute in any HTML tag should be unique within the document. I've omitted your id="1"attributes in my sample HTML above.
顺便说一句：正如其他人所指出的，id任何 HTML 标签中的属性在文档中都应该是唯一的。我id="1"在上面的示例 HTML 中省略了您的属性。
Update:
更新：
If you simply want to count all checkbox elements on the entire page without using a containing form element, this should work:
如果您只是想在不使用包含表单元素的情况下计算整个页面上的所有复选框元素，这应该可行：
<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>
回答by scunliffe
In Plain JavaScript:
在纯 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);
回答by DMKing
I would go with:
我会去：
alert(document.querySelectorAll("input[type=checkbox]").length);
If you wanted a particular form you would need to select the form and use that as a base for your call to querySelectorAll instead of document or change the selector to include the form.
如果您想要一个特定的表单，您需要选择该表单并将其用作调用 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>
Then use:
然后使用：
alert(document.querySelectorAll("#aForm > input[type=checkbox]").length); //shows 2
alert(document.querySelectorAll("#bForm > input[type=checkbox]").length); //shows 3
Note: The Selectors API is only available in newer browsers starting with: Internet Explorer 8, Firefox 3.5, Safari 3.1, Chrome 1, and Opera 10.
注意：Selectors API 仅在较新的浏览器中可用：Internet Explorer 8、Firefox 3.5、Safari 3.1、Chrome 1 和 Opera 10。
回答by jeroen
As you tagged your question with phpand you seem to use some sort of numbering already for the form fields, you can also just echothat php counter to a javascript variable:
当您用 标记您的问题php并且您似乎已经为表单字段使用了某种编号时，您也可以将echo那个 php 计数器用于 javascript 变量：
<?php
//
?>
<script language="javascript" type="text/javascript">
var checkbox_counter = <?php echo $your_counter_in_php; ?>
</script>
<?php
//
?>
By the way, in html you can only have one idon a page and it can′t start with a number.
顺便说一下，在 html 中，你只能id在一个页面上有一个，并且不能以数字开头。
回答by mcgrailm
you could use jquery
你可以使用 jquery
var len = $('input:checkbox').length;
alert(len);
回答by mattsven
alert( $("form input[type='checkbox']").length );
Will give you all the checkboxes in a form, using jQuery.
将使用 jQuery 为您提供表单中的所有复选框。
回答by GordonM
if you have jQuery you could do something like
如果你有 jQuery 你可以做类似的事情
alert ($(':checkbox').length ());
If not then you'll have to document.getElementsByTagName ('input'), iterate over the collection you get back and increment a counter every time you encounter one with its type attribute set to checkbox.
如果不是，那么您将不得不document.getElementsByTagName ('input')遍历您返回的集合，并在每次遇到类型属性设置为复选框的集合时增加一个计数器。
