用Javascript更新輸入框複選框

一個

當作出選擇輸入字段更新爲總，

兩個

複選框是動態生成的，並且有時達到六個，有時低至一個產品。

這是我做了，但我不能讓它的工作:(

<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>

任何幫助將是巨大的！

來源

2012-06-07 Llewellyn

你會提供一個小提琴？ http://jsfiddle.net，它會很容易實時檢查並根據需要進行更新... – Asif

好吧，它不工作，這就是爲什麼我要求幫助，但在這裏你去[鏈接]（http：///jsfiddle.net/FF33T/） – Llewellyn

您可以通過如下方式更改您的代碼和標記：

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>

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; 

}

幾件事情需要注意：

你並不需要包含的JavaScript：在給onChanged屬性的功能之前。您應該使用data- *前綴爲自定義屬性添加前綴。你應該用tr和表圍繞你的td標籤。你使用它們的方式會使更多的發送使用帶有li子的ul標籤。

DEMO - 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>

var amount = 0; 

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

    }

DEMO - http://jsfiddle.net/9mxh5/2/

來源

2012-06-07 16:27:21 tjscience

這是一個解決方案 - http://jsfiddle.net/9mxh5/2/ – tjscience

用Javascript更新輸入框複選框

回答

相關問題