使用 Javascript 和 PHP 的复选框 AutoSum

Question

我想在我的网站上放置一个复选框自动总和，以便任何选中一个框并提交的人，这些复选框的值（点）会自动添加到我的总和中（实际上是在主页上） 到目前为止，我已经为 java 脚本找到了这段代码。

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td> <input name="sum_m_1" value="25" type="checkbox" id="sum_m_1" onclick="UpdateCost()"> </td>
    <td> ResponseOption_1 </td>
  </tr>
  <tr>
    <td> <input name="sum_m_2" value="15" type="checkbox" id="sum_m_2" onclick="UpdateCost()"> </td>
    <td> ResponseOption_2 </td>
  </tr>
</table>
<input type="text" id="totalcost" value="">

使用 JAVASCRIPT：

<script type="text/javascript">
function UpdateCost() {
  var sum = 0;
  var gn, elem;
  for (i=1; i<3; i++) {
    gn = 'sum_m_'+i;
    elem = document.getElementById(gn);
    if (elem.checked == true) { sum += Number(elem.value); }
  }
  document.getElementById('totalcost' ).value = sum.toFixed(2);
}
window.onload=UpdateCost
</script>

这将添加值，但我想通过选中复选框来添加 --> 提交 --> 收集数据 --> 添加到我的主要总数。

任何帮助将不胜感激。

Answer 1

简单的改变：

• 添加一个“计算成本”按钮。
• 从复选框中删除了 onclick 事件，并将 onclick 事件添加到按钮中。

请注意，“window.onload=UpdateCost”仍然存在，因为您希望在页面加载时总成本正确显示为 0.00。

HTML

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td> <input name="sum_m_1" value="25" type="checkbox" id="sum_m_1"> </td>
    <td> ResponseOption_1 </td>
  </tr>
  <tr>
    <td> <input name="sum_m_2" value="15" type="checkbox" id="sum_m_2"> </td>
    <td> ResponseOption_2 </td>
  </tr>
</table>
<input type="text" id="totalcost" value="">
<input type="button" value="update cost" onclick="UpdateCost();">

JavaScript

<script type="text/javascript">
    function UpdateCost() {
      var sum = 0;
      var gn, elem;
      for (i=1; i<3; i++) {
        gn = 'sum_m_'+i;
        elem = document.getElementById(gn);
        if (elem. checked == true) { sum += Number(elem. value); }
      }
      document.getElementById('totalcost' ).value = sum.toFixed(2);
    }
    window.onload=UpdateCost
</script>

希望这是你想要的，让我知道你的想法。