0

我是 jQuery 的新手，这可能是一个简单的答案，但如果选中了复选框，我会尝试计算价格和数量。我遍历项目列表，用户选择复选框并输入数量，我希望它在最后一个单元格中总计。

<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>

到目前为止，我的 jQuery 有以下内容：

$(document).ready(function() {

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

});

谢谢您的帮助！

4

5 回答 5

1

我想你尝试做这样的事情，在这里检查：http: //jsfiddle.net/vNg9v/2/

脚本：

$(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>​

现在这应该正是您想要的？

于 2012-11-19T03:15:47.250 回答
1

@erik1001 的答案就是一切。我只会做以下更改：

使用“on”而不是“click”：

$('input:type=checkbox').on('click',function(){});

将函数存储为变量。这样您就可以从多个事件中重用它：

var runthis = function(){};
$('input:type=checkbox').on('click',runthis);
$('input.quantity').on('change',runthis);
于 2012-11-19T21:48:33.633 回答
0

使用您当前的组织，这可能会变得非常混乱，非常快速。但是，您可以使用jQuery.parent和jQuery.children的组合来获得您需要的东西。

首先，将元素更改为使用类，因为听起来您的示例代码中不止一行。

<td class="price">#Extras.Price #</td>
<td><span class="total"></span></td>

然后，在您的.each函数中，将单击事件处理程序绑定到每个复选框：

$(document).ready(function() {

  $("input[type=checkbox]:checked").each (function (){
    $(this).on('click', function(e) { // bind click event
      var $row = $(this).parent('tr'); // <tr> element
      var total = $row.children('.quantity').val() 
          * parseInt($row.children('.price').val());
      $row.children('.total').html(total);
    });
  });
});

老实说，我不知道 jQuery 是否会拾取您的<cfinput>元素。

于 2012-11-19T03:07:58.613 回答
0

我试着把你的 html 整理成这样：

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

jquery 将是这样的：

  var totalVal = "";
  var qty, price;
  $("input.theCheckboxItem:checked").each (function (){
    qty = $(this).parent().parent().find('.quantity').val();
    price = $(this).parent().parent().find('.priceContainer').text();

    totalVal = parseInt(qty) * parseInt(price);
    $(this).parent().parent().find('.totalContainer').text(totalVal);
  });
于 2012-11-19T03:10:08.483 回答
0

到目前为止，您已经收到了一些很好的信息。我唯一要补充的是，在您尝试使用用户输入进行数学运算之前，请确保用户实际输入了一个数字。

两个答案提到了 parseInt 和 parseFloat 可能适合您的需求。请注意 parseInt("123fred") 返回 123。

于 2012-11-19T03:22:01.450 回答