Question

I have a bit of code that calculates a price and quantity once a check box is selected but I’m having trouble implementing the change to the quantity field if it’s changed from the default of 1 without unchecking and rechecking the checkbox and refiring the checkbox change.

<table>
<tr>
    <td width="10%">&nbsp;</td>
    <td width="20%">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>Test Item 1</td>
    <td class="price">12.50</td>
    <td><input name="qty" class="quantity" value="1"></td>
    <td class="total"></td>
</tr>
    <tr>
    <td >
        <input type="checkbox" name="Extras" value="id" />
    </td>
    <td>Test item 2</td>
    <td class="price">20</td>
    <td><input name="qty" class="quantity" value="1"></td>
    <td class="total"></td>
</tr>

</table>

jQuery

$(document).ready(function() {
$('input:checkbox').change(function() {
    var $this = $(this),
        parentRow = $this.closest('tr'),
        totalCell = parentRow.find('.total');

    if ($this.prop('checked') === true) {
        var price = parseFloat(parentRow.find('.price').html());
        var quantity = parseFloat(parentRow.find('.quantity').val(
           // assuming I'd need a $('input:text').change(function() { 
           // etc at this point but all i've tried doesn't work
           ));
        totalCell.text(price * quantity)
    }
    else totalCell.text('')
});

});

Hope that makes sense

Answer 1

Well you don’t have an event tied to your quantity textbox.

Check out this jsFiddle or the code below:

$('.quantity').change(function() {
    var $this = $(this),
        parentRow = $this.closest('tr'),
        totalCell = parentRow.find('.total');
        checkBox = parentRow.find('input:checkbox');  
    if (checkBox.prop('checked') === true) {
        var price = parseFloat(parentRow.find('.price').html());
        var quantity = parseFloat($this.val());
        totalCell.text(price * quantity)
    }
    else totalCell.text('')
});