チェックボックス値の代わりに隠しフィールド値を使用して合計を計算する

Question

私は、onclickのチェックボックスの合計値を計算するjQueryスクリプトを持っています。代わりにitem nameとしてチェックボックスの値を使用し、値を取得するために隠しフィールドを使用したいと思います。非表示フィールドを対応するチェックボックスにアタッチして、代わりに非表示フィールドの値を計算する方法はありますか？

私は何をしたいのですか？fiidleです。ここに私のjQueryの：

HTML5を使用して

function total(frm) { 
    var tot = 0; 
    for (var i = 0; i < frm.elements.length; i++) { 
     if (frm.elements[i].type == "checkbox") { 
      if (frm.elements[i].checked) tot += Number(frm.elements[i].value) * Number(frm.elements[i+1].value); 
     } 
    } 
    document.getElementById("totalDiv").firstChild.data = "PHP" + tot; 
} 

<li> 
    <label>   
     <input type="checkbox" name="drink[]" value="DrinkName1" onclick="total(this.form);"/> 
     Sample Item 
     <input min="0" max="5" type="number" class="quantity" name="quantity" value="1" onclick="total(this.form);"/> 
     <input type="hidden" name="drinkprice" value="12"> 
    </label> 
</li> 
<li> 
    <label>   
     <input type="checkbox" name="drink[]" value="DrinkName2" onclick="total(this.form);"/> 
     Sample Item 
     <input min="0" max="5" type="number" class="quantity" name="quantity" value="1" onclick="total(this.form);"/> 
     <input type="hidden" name="drinkprice" value="6"> 
    </label> 
</li> 
<li> 
    <label>   
     <input type="checkbox" name="drink[]" value="DrinkName3" onclick="total(this.form);"/> 
Sample Item 
     <input min="0" max="5" type="number" class="quantity" name="quantity" value="1" onclick="total(this.form);"/> 
     <input type="hidden" name="drinkprice" value="4"> 
    </label> 
</li> 
<p>Total</p> 
<div id="totalDiv">0</div> 

Answer 1

はこれを達成するために、余分な隠されたinput要素を使用する必要はありません。代わりに、個別の価格を保持するチェックボックスに独自のdata-*属性を追加することができます。入力要素にクラスを追加してグループ化すると、計算ロジックをより簡単にすることができます。そこから、選択したアイテムを合計する単純なループがあります。

は、最後に、またあなたのイベントハンドラの代わりに、古くなったon*イベント属性を付けるために控えめなJavascriptを使用するためのより良い習慣であることに注意してください、あなたはまた、キーボードを使用してナビゲートする人たちに対応するために、チェックボックスのchangeイベントを使用する必要があります。これはあなたが必要と何を達成すべきである、と述べているすべてで

：

<li> 
    <label> 
     <input type="checkbox" name="drink[]" class="drink" value="DrinkName3" data-price="4" /> Sample Item 
     <input min="0" max="5" type="number" class="quantity" name="quantity" value="1" /> 
    </label> 
</li> 

$('.quantity, .drink').change(calculateTotal); 

function calculateTotal() { 
    var $form = $(this).closest('form'), total = 0; 
    $form.find('.drink:checked').each(function() { 
     total += $(this).data('price') * parseInt($(this).next('.quantity').val() || 0, 10); 
    }); 
    $('#totalDiv').text(total); 
} 

Updated fiddle

Answer 2

、あなたは、カスタムデータの追加を許可している（有効であることを、彼らはdata-*で開始する必要があり、このような

<input type="checkbox" id="sample" name="drink[]" value="Drink1" data-item-price="12"> 

として、あなたの要素に属性実際には、どのブラウザーでも必要ではありません）。

要素から属性を取得するには、かなり単純です：

あなたの特定のケースでは

document.getElementById("cnt").getAttribute("data-item-price") 

：

function total(frm) 
{ 
    var tot = 0; 
    for (var i = 0; i < frm.elements.length; i++) { 
     if (frm.elements[i].type == "checkbox") { 
      if (frm.elements[i].checked) tot += 
       Number(frm.elements[i].getAttribute("data-item-price") * Number(frm.elements[i+1].value); 
     } 
    } 
    document.getElementById("totalDiv").firstChild.data = "PHP" + tot; 
}