j查询复选框是否选中计算字段

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

感谢您的帮助！

我想你尝试做这样的事情，在这里检查一下：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);    
    });
});

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

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

@erik1001的答案应有尽有。我只会进行以下更改：

使用"打开"而不是"单击"：

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

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

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

使用您当前的组织，这可能会变得非常混乱，非常快速。但是，你可以使用 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>元素。

到目前为止，

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

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

我试着整理一下你的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);
  });

相关内容

最新更新

热门标签：