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“价格”的元素更改为具有“价格”的元素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 
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 回答
-1

即使这些可能不是旨在访问服务器的表单控件，我仍然会为每个输入放置 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>
于 2012-11-28T00:36:21.777 回答