I’m building an interface that will calculate a total (based on neighboring inputs) when

Question

0

Asked: May 23, 20262026-05-23T01:05:08+00:00 2026-05-23T01:05:08+00:00

I’m building an interface that will calculate a total (based on neighboring inputs) when

0

I’m building an interface that will calculate a total (based on neighboring inputs) when an input is checked. When an input is checked, I’m getting the values of the other inputs in the same <td> and then building a grand total.

Example: http://jsfiddle.net/vdunm/1/

I need to build a summary of totals (grouped by name) for all checkboxes that are checked and I just can’t seem to find the right path on how to do it.

So if you were to check the first 3 rows (2 foos and 1 bar) I would want the output to look something like this:

FOO: 100  
BAR: 30

Here’s my HTML:

<table id="test">
    <tr>
        <td>
            <input type="checkbox" name="id" size="20" value="100" />
            <input type="text" name="name" size="20" value="FOO" />
            <input type="text" name="cost" size="20" value="10.00">
            <input type="text" name="quantity" size="20" value="1">
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="id" size="20" value="200" />
            <input type="text" name="name" size="20" value="BAR" />
            <input type="text" name="cost" size="20" value="10.00">
            <input type="text" name="quantity" size="20" value="3">
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="id" size="20" value="300" />
            <input type="text" name="name" size="20" value="FOO" />
            <input type="text" name="cost" size="20" value="10.00">
            <input type="text" name="quantity" size="20" value="9">
        </td>
    </tr>
</table>

jQuery:

// when the id checkbox is clicked
$('table').delegate('input[name=id]', 'click', function(){

    // set the total at 0
    var totalCost = 0;

    // loop through each checked line
    $('input[name=id]:checked').each(function(){

       // get the input values for this checked row
       var thisRow = $(this).parent(), 
           person = thisRow.find('input[name=name]').val(),
           qty = thisRow.find('input[name=quantity]').val(),
           cost = thisRow.find('input[name=cost]').val();

       // get total
       var lineCost = cost * qty;

       // add to the grand total 
       totalCost+=parseFloat(lineCost);

    });

    // output the total cost
    $('#output').empty().append(totalCost);

});

Should I be building an array or an object? I basically just need to get all names that have been checked, and show a grand total for each. I just need a point in the right direction.