2

我有一些代码可以在选中复选框后计算价格和数量，但是如果从默认值 1 更改为数量字段而不取消选中并重新选中复选框并重新触发复选框更改，我将无法实现对数量字段的更改.

<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('')
});

});

希望这是有道理的

4

3 回答 3

0

好吧，您没有与数量文本框相关的事件。

查看这个jsFiddle或下面的代码：

$('.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('')
});
于 2012-11-19T05:25:37.330 回答
0

像这样改变你的jQuery

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

        if ($this.prop('checked') === true || parentRow.find('input:checkbox').prop('checked') == true) {
            var price = parseFloat(parentRow.find('.price').html());
            var quantity = parseFloat(parentRow.find('.quantity').val());
            totalCell.text(price * quantity)
        }
        else totalCell.text('')
    });


});​

演示

于 2012-11-19T05:30:56.270 回答
0

我已经解决了一些小问题。通过它，让我知道你需要什么。

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

    if ($(this).is(':checked')) {
        alert('checje');
        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
           ));
        alert(price);
        alert(quantity);
        totalCell.html(price * quantity)
    }
    else totalCell.text('')
});

});​
于 2012-11-19T05:31:49.923 回答