2

2つのことをしたいと思います。

1

選択が行われると、入力フィールドが合計として更新されます。

二

チェックボックスは動的に生成され、最大6つ、場合によっては1つの製品までになることがあります。

これは私が作ったものですが、動作させることができません:(

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

どんな助けでも素晴らしいでしょう！

4

1 に答える 1

2

これを行うには、コードとマークアップを次のように変更します。

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-*プレフィックスを付ける必要があります。tdタグをtrとtableで囲む必要があります。それらを使用する方法では、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/

于 2012-06-07T16:27:21.013 に答える