0

多くのチェックボックスを含むページがあり、それぞれが価格のある製品に関連付けられています。jQuery を使用して、1) 製品の数と 2) ユーザーが選択した合計金額をリアルタイムで表示しようとしています。

これは非常に簡単なはずです: 私は次のようなことをしたでしょう:

$(input).change( function(){
    var sum = $(input:checked).length
    var price_total = $(input:checked).length * 1.99
})

コンプリケーション

上記のコードでは、変更される要素はカウントされません。空のチェックボックスをクリックしてチェックすると、jQuery は現在の要素を「チェック済み」ではなく「チェックされていない」と見なすようです。つまり、変更前のチェックボックスが反映されます。その結果、私のコードは、変更された項目を受け入れるために非常に複雑になります。

これを回避するためのエレガントで簡単な方法はありますか?

4

3 に答える 3

1

投稿したコードが実際に実行しているものであるかどうかはわかりませんが、とりわけ、コードの$セレクターに引用符がありません。しかし、これは私のために働いています：

$(':checkbox').change( function(){
    var sum = $(':checked').length;
    var price_total = sum*1.99;
})​​

jsFiddleデモ

于 2012-06-28T13:35:10.090 に答える
1

あなたのhtmlがなければ、私はそれを推測することしかできません。私の解決策は、data-price のようなデータ エンティティを使用することです。

HTML

​<input type="checkbox" data-price="1.99" />
<input type="checkbox" data-price="1.95" />
<input type="checkbox" data-price="3.60" />
<input type="checkbox" data-price="2.10" />

<div id="total"></div>

Jクエリ 

​$('input').change(function() {
    recalcTotal();
});

function recalcTotal() {
var total = 0;
$('input:checked').each(function() {
    total += $(this).data('price'); 
});

 $('#total').html(total);
}
​

フィドル

注：これが正しいかどうかは不明ですが、製品によって価格が異なる可能性があると仮定しました

于 2012-06-28T13:38:15.513 に答える
0

次のようにチェックボックスを選択できます。

$(input).change( function(){
    var sum = $('input[type=checkbox]:checked').length
    var price_total = sum * 1.99
})

また、2 番目の計算に sum の値を使用しました。そうではありません-それにより、より速く、より読みやすくなります。そして、それは機能します。

于 2012-06-28T13:35:37.533 に答える