Question

我有一个相当简单的问题（我认为）涉及使用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>

非常感谢任何帮助！

Answer 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的“价格”更改为 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>内容肯定会更容易。

Answer 2

即使这些可能不是用于命中服务器的表单控件，我仍然会为每个输入设置value属性。

因此，对于'check-0'输入，我会输入value 100属性（代表$ 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>

Answer 3

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/

选中复选框后更新价格

3 个答案: