0

jQueryを使用して数値を更新するという非常に単純な問題があります（私は思います）。アイテムの価格を保持するDIVがあります。ユーザーはチェックボックスを選択して合計金額に追加できます。私が必要としているのは、誰かがチェックボックスをクリックすると、正しい量がDIVに追加されることです。ユーザーがチェックボックスのチェックを外すと、値が差し引かれます。これまでの私のコードは次のとおりです。

<div class="cell">
    <div class="check">
        <input id="check-0" type="checkbox" />
        <label for="check-0">$100</label>
        <div class="mask"></div>
    </div>
</div>

<div class="price">$347</div>

どんな助けでも大歓迎です！

4

3 に答える 3

1

うまくいけば、これはあなたが使用またはあなたを助けることができるものです：

http://jsfiddle.net/VWRAd/

$(".cell").on("click", "input:checkbox", function () {
    var $this = $(this);
    var $total = $("#price");
    var $target = $("label[for='" + $this.attr("id") + "']");

    var item_value = +($target.html().replace("$", "") || 0);
    var cur_total = +($total.html().replace("$", "") || 0);

    if ($this.prop("checked") === true) {
        cur_total += item_value;
    } else {
        cur_total -= item_value;
    }

    $total.html("$" + cur_total);
});

class「price」の要素を「price」の要素に変更したことに注意してidください。いくつかの「価格」要素があると予想しない限り、それは理にかなっています。

そして、これを行う別の可能な方法があります...どちらが良いかわかりません：

http://jsfiddle.net/VWRAd/1/

$(".cell").on("click", "input:checkbox", function () {
    var $items = $(".cell").find("input:checkbox:checked");
    var $total = $("#price");
    var cur_total = 0;

    $items.each(function () {
        var $this = $(this);
        var $target = $("label[for='" + $this.attr("id") + "']");
        var item_value = +($target.html().replace("$", "") || 0);

        cur_total += item_value;
    });

    $total.html("$" + cur_total);
});

考慮すべき点がいくつかあります。アイテムを表示するときに、アイテムの実際の値から「$」を分離することは理にかなっています...「$」で値を格納していないと確信しているので、同様の構造が必要になる場合がありますに<label for="whatever">$<span class="the-value">100</span></label>。jQueryセレクターロジックが少し変更されますが、.replace頻繁に使用する必要がなくなります。また、他の誰かがすでに指摘しているように、チェックボックスのvalue属性にアイテムの価格を保存し、その方法で取得する方が（対応する<label>コンテンツを見つけるよりも）間違いなく簡単です。

于 2012-11-28T00:36:29.623 に答える
-1

これらはサーバーにアクセスすることを目的としたフォームコントロールではない場合でも、各入力のvalue属性を設定します。

したがって、「check-0」入力の場合、（$ 100を表すために）のvalue属性を入力します。100

次に、JavaScriptロジックを少し使用すると、価格値を簡単に更新できるようになります。

したがって、このようなものでそれを行う必要があります（http://jsbin.com/orodow/1/edit）：

<div class="cell">
    <div class="check">
        <input id="check-0" type="checkbox" value="100" />
        <label for="check-0">$100</label>
        <div class="mask"></div>
    </div>
</div>
<div class="cell">
    <div class="check">
        <input id="check-1" type="checkbox" value="50" />
        <label for="check-1">$50</label>
        <div class="mask"></div>
    </div>
</div>
<div class="cell">
    <div class="check">
        <input id="check-2" type="checkbox" value="20" />
        <label for="check-2">$20</label>
        <div class="mask"></div>
    </div>
</div>

<div class="price"></div>

<script>
    $(function(){
        var inputs = $('.check input:checkbox');
        function updatePrice(){
            var value = 0;
            inputs.filter(':checked').each(function(){
                value += parseInt($(this).val(), 10);
            });
            $('.price').html('$' + value);
        }
        inputs.change(updatePrice);
    });
</script>
于 2012-11-28T00:36:21.777 に答える
-1 
var changePrice = function changePrice(amt, state){
    var curPrice = $('.price').text();
    curPrice = curPrice.substring(1, curPrice.length);
    if(state==true){
        curPrice = parseInt(curPrice) + parseInt(amt);
    }else{
        curPrice = parseInt(curPrice) - parseInt(amt);
    }
    curPrice = '$' + curPrice;
    $('.price').text(curPrice);
}
$(function(){
    $('#check-0').on('change', function(){
        var itemPrice = $('label[for="check-0"]').text();
        itemPrice = itemPrice.substring(1, itemPrice.length);
    changePrice(itemPrice, $('#check-0').is(':checked'));
    });
})​;​

デモ： http： //jsfiddle.net/pratik136/r2Snu/

于 2012-11-28T00:40:48.917 に答える