使用 Javascript 更新复选框选择时的输入字段

Update input field on checkbox selection with Javascript

本文关键字：输入 字段 选择 Javascript 更新 复选框 使用      更新时间：2023-09-26

我希望发生两件事。

一

进行选择后，输入字段将更新为总计，

二

复选框是动态生成的，有时可能高达 六种，有时低至一种产品。

这是我所做的，但我无法让它工作:(

   <script type="text/javascript">
    function updateTotal(){
        document.getElementById('total').value = 
            (document.getElementById('date0').checked?
             parseFloat(document.getElementById('date0').price):0) +
             (document.getElementById('date1').checked?
             parseFloat(document.getElementById('date1').price):0) +
             (document.getElementById('date2').checked?
             parseFloat(document.getElementById('date2').price):0);
    }
    </script>

以此为形式

<form>
 <td id="datecontainer" onchange="Process(this.options[this.selectedIndex].value)">
   <input id="date0" type="checkbox" name="form[date]" value="blue" price="10" onChange="javascript:updateTotal();">product 1<br />
   <input id="date1" type="checkbox" name="form[date]" value="green" price="30" onChange="javascript:updateTotal();">product 2<br />
   <input id="date2" type="checkbox" name="form[date]" value="red" price="50" onChange="javascript:updateTotal();">product 3<br />
 </td>
 <td>
  Total cost is:
  <input name="total" id="total" type="text" readonly="readonly" style="border:0px;">
 </td>
</form>

任何帮助都会很棒！

您可以通过更改代码和标记来执行此操作，如下所示：

.HTML 

<td id="datecontainer" onchange="Process(this.options[this.selectedIndex].value)">
   <input id="date0" type="checkbox" name="form[date]" value="blue" data-price="10" onChange="updateTotal();">product 1<br />
   <input id="date1" type="checkbox" name="form[date]" value="green" data-price="30" onChange="updateTotal();">product 2<br />
   <input id="date2" type="checkbox" name="form[date]" value="red" data-price="50" onChange="updateTotal();">product 3<br />
 </td>
 <td>
  Total cost is:
  <input name="total" id="total" type="text" readonly="readonly" style="border:0px;">
 </td>​

.JS

function updateTotal(){
    var date0 = document.getElementById('date0');
    var date1 = document.getElementById('date1');
    var date2 = document.getElementById('date2');
    var amount = 0;    
    amount += date0.checked ? parseFloat(date0.getAttribute('data-price')) : 0;
    amount += date1.checked ? parseFloat(date1.getAttribute('data-price')) : 0;
    amount += date2.checked ? parseFloat(date2.getAttribute('data-price')) : 0;
    document.getElementById('total').value = amount;
}​

需要注意的几点：

你不需要在 onchanged 属性中的函数之前包含 javascript： 。您应该在自定义属性前面加上 data-* 前缀。您应该用 tr 和表格包围您的 td 标签。 您使用它们的方式会使更多的发送与 li 孩子一起使用 ul 标签。

演示 - http://jsfiddle.net/9mxh5/

如果复选框是动态生成的，并且您不知道可能有多少个复选框：

.HTML

<td id="datecontainer" onchange="Process(this.options[this.selectedIndex].value)">
   <input id="date0" type="checkbox" name="form[date]" value="blue" data-price="10" onChange="updateTotal(this);">product 1<br />
   <input id="date1" type="checkbox" name="form[date]" value="green" data-price="30" onChange="updateTotal(this);">product 2<br />
   <input id="date2" type="checkbox" name="form[date]" value="red" data-price="50" onChange="updateTotal(this);">product 3<br />
 </td>
 <td>

.JS

var amount = 0;
function updateTotal(element){
        var price = parseFloat(element.getAttribute('data-price'));
        amount += element.checked ? price : price*(-1);
        document.getElementById('total').value = amount;
    }​

演示 - http://jsfiddle.net/9mxh5/2/

相关文章：