7

假设我有一个表单的以下部分：

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

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

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

该脚本不断返回 NaN 作为插件的值。起初，我想知道 javascript 是否将值作为字符串而不是整数读取，但是在 av[e] 周围添加 (x)*1 并不能解决这个问题。然后，我对 getElementsByName 进行了更多阅读，并了解到它可能不是一个典型的数组，而是一个 nodeList。

我是 Javascript 新手，在谷歌搜索数小时后无法弄清楚如何操作这个 nodeList。任何帮助表示赞赏。我想将 8 个复选框保留在单独的表格单元格中，因此据我所知，使用 childNodes 之类的东西在这里并不完全有效。在这一点上，我也想避开任何 jQuery ......我仍在学习，我想确保我首先了解如何在普通的旧 javascript 中做到这一点。谢谢！

4

3 回答 3

9

您需要使用 value 属性并将其解析为数字。例如：

function iaddon()
{
    addon = 0;
    for (e = 0; e < av.length; e++)
    {
        if (av[e].checked == true)
        {
            addon += parseInt(av[e].value, 10);
        }
    }
}
于 2011-01-05T17:05:29.653 回答
5

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;
   }
  }
 }
于 2011-01-05T16:58:05.420 回答
2

顺便说一句，突兀的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
});
于 2013-01-02T16:53:48.470 回答