複数の値を持つチェックボックスを追加する

Question

私は、ユーザーが選択できるチェックボックスに一連の書籍を用意しています。本がチェックされる度に価格が加算されます。私はまた、対応する体重を加える必要があります。 this very useful exampleを変更しましたが、役に立たないです。

<label class="checkbox" for="Checkbox1"> 
<input value="50" type="checkbox" class="sum" data-toggle="checkbox"> Instagram 
</label> 
<label class="checkbox"> 
    <input value="50" bweight=".4" type="checkbox" class="sum" data-toggle="checkbox"> Review site monitoring 
</label> 
<label class="checkbox"> 
    <input value="30" bweight=".2" type="checkbox" class="sum" data-toggle="checkbox"> Google+ 
</label> 
<label class="checkbox"> 
    <input value="20" bweight=".6" type="checkbox" class="sum" data-toggle="checkbox"> LinkedIn 
</label> 

<div class="card-charge-info"> 
    <span id="payment-total">0</span> 
</div> 

var inputs = document.getElementsByClassName('sum'), 
    total = document.getElementById('payment-total'); 
    totwgt = document.getElementById('payment-w'); 

for (var i = 0; i < inputs.length; i++) { 
    inputs[i].onchange = function() { 
     var add = this.value * (this.checked ? 1 : -1); 
     var add = this.wgt * (this.checked ? 1 : -1); 
     total.innerHTML = parseFloat(total.innerHTML) + add 
     totwgt.innerHTML = parseFloat(total1.innerHTML) + add 
    } 
} 

HERESにコードhttps://jsfiddle.net/u8bsjegk/2/

Answer 1

あなたはいくつかの問題があります：あなたは、変数addを再宣言

• を
• あなたはtotal1のタイプミスはそれがあるべき持ってtotwgt
• あなたは、あなたのコード内でthis.getAttribute('bweight')

https://jsfiddle.net/u8bsjegk/6/

Answer 2

ありますいくつかの問題を使用する必要があります

代わりthis.wgtのpayment-w idを持つ要素を持っていません。最初に、add変数を2つの場所に定義します。一方は値のためにもう一方は重みのために、計算はそこから壊れています。 bweightはinput要素の有効な属性ではないことにも注意してください。独自のメタデータを追加するには、代わりにdata-*属性を使用する必要があります。

この試してみてください：あなたはjQueryを使ってこの質問をタグ付けてきたように

var inputs = document.getElementsByClassName('sum'), 
    totalValue = document.getElementById('payment-total'), 
    totalWeight = document.getElementById('payment-w'); 


for (var i = 0; i < inputs.length; i++) { 
    inputs[i].onchange = function() { 
     var value = parseFloat(this.value); 
     var weight = parseFloat(this.dataset.weight); 

     totalValue.innerHTML = parseFloat(totalValue.innerHTML) + value 
     totalWeight.innerHTML = parseFloat(totalWeight.innerHTML) + weight 
    } 
} 

は、ここにdownvoteの説明が参考になること

var $inputs = $('.sum'), 
    $totalValue = $('#payment-total'), 
    $totalWeight = $('#payment-w'); 

$inputs.change(function() { 
    var value = parseFloat(this.value); 
    var weight = parseFloat($(this).data('weight')); 

    $totalValue.text(function(i, text) { 
     return parseFloat(text) + value; 
    }); 
    $totalWeight.text(function(i, text) { 
     return parseFloat(text) + weight; 
    }); 
}) 

Working example