Question

我是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    
  });

});

感谢您的帮助！

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

现在这应该是你想要的吗？

Answer 2

@erik1001's answer拥有一切。我只做了以下更改：

使用'on'代替'click'：

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

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

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

Answer 3

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

首先，更改元素以使用类，因为听起来你的示例代码中只有一行。

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

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

$(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>元素。

Answer 4

我试着把你的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);
  });

Answer 5

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

两个答案提到了parseInt和parseFloat，它们可能适合您的需求。请注意，parseInt（“123fred”）返回123。

jQuery如果选中复选框计算字段

5 个答案: