php - 使用 Javascript 和 PHP 的复选框自动求和

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>

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