Question

I have the following functionality I would like to build into a form using jQuery:

I have a list of values:
Invoice No: 110, Amount: 240.00
Invoice No: 111, Amount: 399.00
Invoice No: 112, Amount: 150.00

Next to each row there is a checkbox which is set to checked by default. Right at the bottom there is a textbox with the total 789.00 for the set of data. I would like to update the textbox when one of the checkboxes are de-selected & selected with the total of invoice amounts which checkboxs are checked.

The form will then be submitted to itself with the value of the textbox set.

Any suggestions welcome, as I’m a noob with jQuery.

Answer 1

Just answered similar question here: jQuery – Getting total depending on which checkboxes are selected

put some css class to your invoice total span, ex: <span class="inv-total">120<span>.

then put your checkbox inside of your invoice <div>:

<div>
    <input type="checkbox" value="##inv if here ##" />
</div>

and then jQuery of course:

$(document).ready(function() {
    $("input[type=checkbox]").click(function(event) {
        var total = 0;
        $("input:checked").each(function() {
            total += parseInt($(this).parent().find('.inv-total').text().substring(1));
        });

        if (total == 0) {
            $('#total').val('');
        }
        else {
            $('#total').val('$' + total);
        }
    });
});

I haven’t chanse to test it, but this is the idea.

Live example: http://jsfiddle.net/dH9Eb/2/