Question

假设我有以下表格部分：

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

每次用户选择或取消选中复选框时，我都需要脚本将变量addon重新计算为所选框的所有值的总和。这是我首先提出的代码，但它似乎对我不起作用：

function iaddon() {
 addon=0;
 av=document.getElementsByName("faddon");
 for (e=0;e<av.length;e++) {
  if (av[e].checked==true) {
   addon+=av[e];
   }
  }
 }

该脚本将NaN作为addon的值返回。起初，我想知道javascript是否正在将值读取为字符串而不是整数，但在av [e]周围添加（x）* 1并没有解决这个问题。然后，我在getElementsByName中读了一些内容，并读了一下它可能不是一个典型的数组，而是一个nodeList。

我是Javascript的新手，无法弄清楚谷歌搜索后如何操纵这个nodeList。任何帮助表示赞赏。我想将8个复选框保留在单独的表格单元格中，因此，就我所知，使用像childNodes这样的东西在这里不会完全正常工作。我还想在这一点上避开任何jQuery ......我还在学习，我想确保我先了解如何在普通的旧javascript中完成它。谢谢！

Answer 1

您需要使用value属性并将其解析为数字。 e.g：

function iaddon()
{
    addon = 0;
    for (e = 0; e < av.length; e++)
    {
        if (av[e].checked == true)
        {
            addon += parseInt(av[e].value, 10);
        }
    }
}

Answer 2

av [e]将返回元素，而不是addon不是数字的元素值。

我相信你想使用av[e].value

另请注意，由于您在函数开头设置了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;
   }
  }
 }

Answer 3

顺便说一句，突兀的js

<input type="checkbox" name="faddon" onchange="iaddon()" value="89.00"/>

对于维护代码非常压抑，因为js和html代码都是一起编写的。

尝试编写不引人注目的js代码，如：

在html中：

 <input id="index1" type="checkbox" name="faddon" value="89.00"/>

在js：

$('index1').click(function() {
  // Edit your function
});

如何使用getElementsByName访问复选框及其值

3 个答案: