Question

I’m a novice with jQuery and it probably a simple answer but I’m trying to calculate the price and quantity if a checkbox is checked. I loop through a list of items and the user selects the checkbox and enters the quantity and I’d like it to total in the last cell.

<table>
<tr>
<td width="10%">&nbsp;</td>
<td width="80%">Item</td>
<td width="10%">Price</td>
<td width="10%">Quantity</td>
<td width="10%">Total</td>
</tr>


<tr>
<td > <input type="checkbox" name="Extras" value="id" checked="no"></td>
<td >ItemName</td>
<td><cfinput type="text" name="quantity" class="quantity" size="4"></td>
<td>#Extras.Price #</td>
<td><span id="total"></span></td>
</tr>

</table>

So far I have the following for my jQuery:

$(document).ready(function() {

  $("input[type=checkbox]:checked").each (function (){
    // not sure what to put here    
  });

});

Thanks for the help!

Answer 1

I think you try to do something like this, check it here: http://jsfiddle.net/vNg9v/2/

Script:

$(document).ready(function() {
    var totalQ = $('#total-q'),
        totalT = $('#total-t'),
        valQ = 0,
        valT = 0;
    $('input:checkbox').change(function () {
        var $this = $(this),
            parentRow = $this.closest('tr'),
            totalCell =             parentRow.find('.total'),
            price = parseFloat(parentRow.find('.price').html()),
            quantity = parseFloat(parentRow.find('.quantity').val()),
            total = price * quantity;


        if ($this.prop('checked') === true)
        {
            totalCell.html(total);
            valQ += quantity;
            valT += total;
        }
        else
        {
            valQ -= quantity;
            valT -= total;
            totalCell.text('')   
        }           
        totalQ.html(valQ);
        totalT.html(valT);    
    });
});​

Html:

<table>
    <tr>
        <td width="10%">&nbsp;</td>
        <td width="80%">Item</td>
        <td width="10%">Price</td>
        <td width="10%">Quantity</td>
        <td width="10%">Total</td>
    </tr>
    <tr>
        <td > 
            <input type="checkbox" name="Extras" value="id" />
        </td>
        <td>ItemName</td>
        <td class="price">12.10</td>
        <td>
            <input name="quantity" class="quantity" size="3" value="0" />
        </td>
        <td class="total"></td>
    </tr>
    <tr>
        <td colspan="3">TOTAL</td>
        <td id="total-q">0</td>
        <td id="total-t">0</td>
    </tr>
</table>​

Now this should be exactly what you want?