Update price after checkbox is selected

Question

I have a fairly simple problem (I think) that involves updating a number using jQuery. I have a DIV that holds a price for an item. Users can select a checkbox to add on to the total price. What I need is when someone clicks on a checkbox, it will add the correct amount to the DIV. When a user un-checks a checkbox, the value is subtracted. Here is my code so far:

<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>

Any help is greatly appreciated!

Answer 1

Hopefully this is something that you could use or help you:

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);
});

Although notice that I changed the element with the class of "price" to have an id of "price". It just makes sense, unless you expect to have several "price" elements.

And here is another possible way of doing it...not sure which is better:

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);
});

Some things to consider - it makes sense to separate the "$" from the actual value of the item when displaying it...I'm sure you aren't storing the value with "$", so you might want a structure similar to <label for="whatever">$<span class="the-value">100</span></label> . It would change your jQuery selector logic a little bit, but it would prevent the need for using .replace so often. Also, as someone else already pointed out, it would definitely be easier to store the item's price in the checkbox's value attribute and retrieve it that way (instead of finding the corresponding <label> 's content.

Answer 2

Even though these may not be form controls intended to hit the server, i would still put the value attribute for each of the inputs.

So for the 'check-0' input, i'd put in a value attribute of 100 (to represent the $100).

Then, a bit of javascript logic should make it easy to update the price value.

So something like this should do it ( 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'));
    });
})​;​

Demo: http://jsfiddle.net/pratik136/r2Snu/