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するため、アドオンの値は常に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 に答える