Javascript 如何使用 getElementsByName 访问复选框及其值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4606791/
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 access checkboxes and their values with getElementsByName
提问by mendahu
Suppose I have the following section of a form:
假设我有表单的以下部分：
<td>
<p>
<input type="checkbox" name="faddon" onchange="iaddon()" value="89.00" /><br />
<input type="checkbox" name="faddon" onchange="iaddon()" value="29.00" /><br />
<input type="checkbox" name="faddon" onchange="iaddon()" value="49.00" /><br />
<input type="checkbox" name="faddon" onchange="iaddon()" value="39.00" />
</p>
</td>
<td>
<p>
<input type="checkbox" name="faddon" onchange="iaddon()" value="69.00" /><br />
<input type="checkbox" name="faddon" onchange="iaddon()" value="69.00" /><br />
<input type="checkbox" name="faddon" onchange="iaddon()" value="69.00" /><br />
<input type="checkbox" name="faddon" onchange="iaddon()" value="69.00" />
</p>
</td>
Every time the user selects or deselects a checkbox, I need the script to recalculate the variable addon to the total of all values of the boxes which are checked. This is the code I came up with first, but it does not appear to work for me:
每次用户选择或取消选择复选框时，我都需要脚本将变量 addon 重新计算为选中的框的所有值的总和。这是我首先想到的代码，但它似乎对我不起作用：
function iaddon() {
addon=0;
av=document.getElementsByName("faddon");
for (e=0;e<av.length;e++) {
if (av[e].checked==true) {
addon+=av[e];
}
}
}
The script keeps returning NaN as the value of addon. At first, I wondered if javascript was reading the values as strings and not integers, but adding a (x)*1 around av[e] did not fix this. Then, I read a little more into getElementsByName and read about it possibly not being a typical array, but instead a nodeList.
该脚本不断返回 NaN 作为插件的值。起初，我想知道 javascript 是否将值作为字符串而不是整数读取，但是在 av[e] 周围添加 (x)*1 并没有解决这个问题。然后，我更多地阅读了 getElementsByName 并了解到它可能不是一个典型的数组，而是一个 nodeList。
I'm new to Javascript and can't figure out after hours of googling how to manipulate this nodeList. Any help is appreciated. I'd like to keep the 8 checkboxes in seperate table cells, so using something like childNodes wouldn't exactly work here, as far as I can tell. I also would like to steer clear of any jQuery at this point...I'm still learning and I want to make sure I understand how to do it in plain old javascript first. Thanks!
我是 Javascript 的新手，在谷歌搜索数小时后无法弄清楚如何操作这个 nodeList。任何帮助表示赞赏。我想将 8 个复选框保留在单独的表格单元格中，因此据我所知，使用 childNodes 之类的东西在这里是行不通的。我也想在这一点上避开任何 jQuery...我仍在学习，我想确保我首先了解如何在普通的旧 javascript 中做到这一点。谢谢！
回答by Chandu
You need to use the value property and also parse it to a number. e.g:
您需要使用 value 属性并将其解析为数字。例如：
function iaddon()
{
addon = 0;
for (e = 0; e < av.length; e++)
{
if (av[e].checked == true)
{
addon += parseInt(av[e].value, 10);
}
}
}
回答by John Hartsock
av[e] will return the element not the value of the element there for addonis not a number.
av[e] 将返回元素而不是元素的值，因为addon不是数字。
I believe you want to use av[e].value
我相信你想用 av[e].value
also note that since you set addon=0at the start of the function the value of addon will always only be the value of av[e].valueduring the function call.
还请注意，由于您addon=0在函数的开头设置了 addon 的值将始终仅是av[e].value函数调用期间的值。
function iaddon() {
addon=0;
av=document.getElementsByName("faddon");
for (e=0;e<av.length;e++) {
if (av[e].checked==true) {
addon+=av[e].value;
}
}
}
回答by macio.Jun
btw, obtrusive js
顺便说一句，突兀的js
<input type="checkbox" name="faddon" onchange="iaddon()" value="89.00"/>
is very depressive to maintain your code, for both js and html code are written together.
维护你的代码很郁闷，因为js和html代码都是一起写的。
Try to write unobtrusive js code like:
尝试编写不引人注目的 js 代码，例如：
In html:
在 HTML 中：
<input id="index1" type="checkbox" name="faddon" value="89.00"/>
In js:
在js中：
$('index1').click(function() {
// Edit your function
});
