jQuery - Getting total depending on which checkboxes are selected

I have a series of checkboxes that represent various food items. I would like to create a subtotal depending 开发者_如何转开发on what the user selects. I have been looking through the jQuery documentation and I see how to update the the value of a textbox however how does one do a new tally every time a new checkbox is "checked". Also, what happens when a checkbox is "un-selected". Is there a way to store the value of each item in the HTML code of the checkbox?

I have a jsFiddle example I have been fooling with here ...

http://jsfiddle.net/fQTUp/2/

---

Add value with price to the checkboxes and count it. Here is: http://jsfiddle.net/fQTUp/9/

---

You can do it like this:

Working demo here: http://jsfiddle.net/jfriend00/RT4XS/

// When the page is ready
$(document).ready(function() {
    $("input").click(function(event) {
        updateTotal();
    });
});

function updateTotal() {
    var total = 0;
    $("#menu input:checked").each(function() {
        total += parseFloat(this.value);
    });
    $('#TotalCost').val("$" + total.toFixed(2));
}

You can put the price on the actual HTML elements as the value and then just iterate over the checked items adding up the price.