javascript - 更新 onchange 上显示的价格

标签 javascript jquery html

我只是想获取显示的价格,以更新 onchange 事件。现在,这只是向我显示 onchange id 的两个值,我想让某人单击一个复选框,然后将已显示的价格更新为新值。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <html>
 <head>
 </head>
 <body>
 <table>
    <tr>
      <td>
      <input type="checkbox" id="extras" value="25.00" onChange="calc()">
      </td>
     <td>
      <input type="checkbox" id="rush" value="35.00" onChange="calc()">
      </td>
      <td>
           <input id="total" type="text" value="90.00" />
      </td>
 </tr>
 </table>
 </body>
 <script type='text/javascript'>
      function calc() {    
          var extras = document.getElementById('extras').value;
          var rush  = document.getElementById('rush').value;
          var result = document.getElementById("total");
          result.value = extras + rush;
      }
 </script>
 </html>

最佳答案

你可以这样做:

$('input[type=checkbox]').change(function () {
    var val = parseFloat(this.value),
        totalVal = parseFloat($('#total').val());
    if (this.checked) {
        $('#total').val((totalVal + val).toFixed(2));
    } else {
        $('#total').val((totalVal - val).toFixed(2));
    }
});

<强> Fiddle Demo

关于javascript - 更新 onchange 上显示的价格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23555705/

相关文章:

asp.net - html body中的Javascript遇到时是否执行?

html - 将 margin-bottom 添加到 border-collapse 表

javascript - 如何根据两个下拉选项从数据库中检索数据

javascript - 多级菜单未正确显示

javascript - 我使用 every() 方法得到不同的结果

javascript - 根据字符串: Angular排序

javascript - 从 Javascript 将参数传递给 aspx 页面的方法

javascript - 在javascript中获取表单名称

javascript - jQuery 表单插件 - 不会在内部服务器错误 (500) 上调用错误回调

javascript - 拖动行时自动滚动表格