Question

我有一些代码可以在选中一个复选框后计算价格和数量，但是如果它从默认值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('')
});

});

希望有意义

Answer 1

您没有与数量文本框绑定的事件。

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

Answer 2

像这样改变你的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('')
    });


});

DEMO

Answer 3

我修复了一些小问题。通过它，让我知道你需要什么。

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

});

复制后.jQuery .change文本输入.change

3 个答案: