在 HTML 中使用 JavaScript 复选框值答案

【问题标题】：Use JavaScript checkbox value in HTML在 HTML 中使用 JavaScript 复选框值
【发布时间】：2018-05-13 10:50:47
【问题描述】：

我希望能够使用使用 javascript 生成的总金额，并稍后在 HTML 表单中的 <span> 字段中显示在页面上。复选框加法和减法工作正常，我对此没有任何问题。我无法弄清楚以后如何在 HTML 字段中使用该值（如下所示为 PayPal 代码）。

我在处理javascript 的<head> 中有这个：

<head>
  <script type="text/javascript">
    var total = 0.00;

    function test(item) {
      if (item.checked) {
        total += parseFloat(item.value);
      } else {
        total -= parseFloat(item.value);
      }
      //alert(total);
      document.getElementById('Totalcost').innerHTML = total.toFixed(2);
    }
  </script>
</head>

如果选中复选框，则adds/subtracts：

<td class="column-3">
  <br>
  <label class="container">
    <input type="checkbox" name="Shoes" value="2.95" onClick="test(this);">Select<span class="checkmark"></span>
  </label>
</td>
<td class="column-3">
  <br>
  <label class="container">
    <input type="checkbox" name="Clothes" value="2.95" onClick="test(this);">Select<span class="checkmark"></span>
  </label>
</td>

然后我用这个显示总数：

Total Amount: $<span id="Totalcost">0.00</span>

所有这些都正常工作，选中/取消选中反映在页面底部显示的总金额上。

我想做的是使用下面 HTML 中显示的总金额作为 PayPal 订阅链接，以便将金额添加到行。

<form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
  <input type="hidden" name="cmd" value="_xclick-subscriptions">
  <input type="hidden" name="business" value="myemailaddress.com">
  <input type="hidden" name="item_name" value="Shows & Clothes">
  <input type="hidden" name="item_description" value="Shows & Clothes">
  <input type="hidden" name="currency_code" value="GBP">
  <input type="hidden" name="no_shipping" value="1">
  <input type="image" src="http://www.paypal.com/en_GB/i/btn/x-click-but20.gif" border="0" name="submit" alt="Make payments with PayPal - it\'s fast, free and secure!">
  <input type="hidden" name="a3" value="TOTAL_AMOUNT">
  <input type="hidden" name="p3" value="1">
  <input type="hidden" name="t3" value="M">
  <input type="hidden" name="src" value="1">
  <input type="hidden" name="sra" value="1">
</form>

是否可以捕获 'totalcost' 并将其动态添加到 PayPal 表单中的 "a3" 字段（其中显示 TOTAL_AMOUNT），因为当客户单击 PayPal 按钮时，它已经具有正确的值/表格中的金额？

谢谢。

【问题讨论】：

为什么getElementById(\'Totalcost\') 中有反斜杠？
老实说我不知道，他们已经在代码中了，它似乎是这样工作的......
@omega1 它不能工作...... ' 被转义，所以字符串文字不起作用。在控制台中评估它会抛出一个SyntaxError。
@blueren 这是 document.getElementsByName，默认情况下你会得到一个 NodeList。
你是对的，反斜杠在那里是因为在原始代码中部分在 PHP 回显中，我已经相应地编辑了原始问题。

标签： javascript javascript javascript html forms paypal

【解决方案1】：

您可以使用document.getElementsByName。默认情况下，您将获得NodeList。例如：

var a3 = document.getElementsByName("a3")[0];
a3.value = total.toFixed(2);

您可以轻松更新其值。

类似这样的：

var total = 0.00;

function test(item) {
  if (item.checked) {
    total += parseFloat(item.value);
  } else {
    total -= parseFloat(item.value);
  }
  document.getElementById("Totalcost").innerHTML = total.toFixed(2);

  var a3 = document.getElementsByName("a3")[0];
  a3.value = total.toFixed(2);
}

<form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
  <input type="hidden" name="cmd" value="_xclick-subscriptions">
  <input type="hidden" name="business" value="myemailaddress.com">
  <input type="hidden" name="item_name" value="Shows & Clothes">
  <input type="hidden" name="item_description" value="Shows & Clothes">
  <input type="hidden" name="currency_code" value="GBP">
  <input type="hidden" name="no_shipping" value="1">
  <input type="image" src="http://www.paypal.com/en_GB/i/btn/x-click-but20.gif" border="0" name="submit" alt="Make payments with PayPal - it\'s fast, free and secure!">
  <input type="hidden" name="a3" value="TOTAL_AMOUNT">
  <input type="hidden" name="p3" value="1">
  <input type="hidden" name="t3" value="M">
  <input type="hidden" name="src" value="1">
  <input type="hidden" name="sra" value="1">
</form>

<table>
  <tr>
    <td class="column-3">
      <br>
      <label class="container">
        <input type="checkbox" name="Shoes" value="2.95" onClick="test(this);">Select<span class="checkmark"></span>
      </label>
    </td>
    <td class="column-3">
      <br>
      <label class="container">
        <input type="checkbox" name="Clothes" value="2.95" onClick="test(this);">Select<span class="checkmark"></span>
      </label>
    </td>
  </tr>
</table>
<span id="Totalcost">0.00</span>

【讨论】：

完美！非常感谢！