Question

我是新手，因此我一直在努力调整其他人的代码以满足我的需求，我需要从第一个名称组中选择一个无线电，然后添加到第二个名称组，然后显示在文本框中底部。

底部文本框中没有任何内容。我哪里错了？

使用Javascript：

$("input[type=radio]").click(function() 
{
    var total = 0;
    $("input[type=radio]:checked").each(function() 
    {
        total += parseFloat($(this).val());
    });

    $("#totalSum").val(total);
});

HTML：

<strong>Choose a base package:</strong>
<input id="item_0" type="radio" name="pkg" value="1942" />Base Package 1 - $1942
<input id="item_1" type="radio" name="pkg" value="2313" />Base Package 2 - $2313
<input id="item_2" type="radio" name="pkg" value="2829" />Base Package 3 - $2829
<strong>Choose an add on:</strong>
<input id="item_10" type="radio" name="ext" value="0" />No add-on - +$0
<input id="item_12" type="radio" name="ext" value="2146" />Add-on 1 - (+$2146)
<input id="item_13" type="radio" name="ext" value="2455" />Add-on 2 - (+$2455)
<input id="item_14" type="radio" name="ext" value="2764" />Add-on 3 - (+$2764)
<input id="item_15" type="radio" name="ext" value="3073" />Add-on 4 - (+$3073)
<input id="item_16" type="radio" name="ext" value="3382" />Add-on 5 - (+$3382)
<input id="item_17" type="radio" name="ext" value="3691" />Add-on 6 - (+$3691)
<strong>Your total is:</strong>
<input id="totalSum" type="text" name="totalSum" readonly="readonly" size="5" value="" />

Answer 1

您的javascript在生成HTML之前执行，因此它不会“看到”未生成的INPUT元素。对于jQuery，你可以在HTML的末尾粘贴Javascript或者像这样包装它：

<script type="text/javascript">
  $(function() { //jQuery trick to say after all the HTML is parsed.
    $("input[type=radio]").click(function() {
      var total = 0;
      $("input[type=radio]:checked").each(function() {
        total += parseFloat($(this).val());
      });

      $("#totalSum").val(total);
    });
  });
</script>

编辑：此代码适用于我

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
  <strong>Choose a base package:</strong>
  <input id="item_0" type="radio" name="pkg" value="1942" />Base Package 1 - $1942
  <input id="item_1" type="radio" name="pkg" value="2313" />Base Package 2 - $2313
  <input id="item_2" type="radio" name="pkg" value="2829" />Base Package 3 - $2829
  <strong>Choose an add on:</strong>
  <input id="item_10" type="radio" name="ext" value="0" />No add-on - +$0
  <input id="item_12" type="radio" name="ext" value="2146" />Add-on 1 - (+$2146)
  <input id="item_13" type="radio" name="ext" value="2455" />Add-on 2 - (+$2455)
  <input id="item_14" type="radio" name="ext" value="2764" />Add-on 3 - (+$2764)
  <input id="item_15" type="radio" name="ext" value="3073" />Add-on 4 - (+$3073)
  <input id="item_16" type="radio" name="ext" value="3382" />Add-on 5 - (+$3382)
  <input id="item_17" type="radio" name="ext" value="3691" />Add-on 6 - (+$3691)
  <strong>Your total is:</strong>
  <input id="totalSum" type="text" name="totalSum" readonly="readonly" size="5" value="" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript">
      $("input[type=radio]").click(function() {
        var total = 0;
        $("input[type=radio]:checked").each(function() {
          total += parseFloat($(this).val());
        });

        $("#totalSum").val(total);
      });
    </script>
</body>
</html>

求和无线电输入值

1 个答案: