Question

我有一张发票号码，日期和总数的表格。我希望选中的总数返回到变量中的jQuery。 PHP目前正在生成表格，因此如果它有助于在输入中添加唯一ID或修改HTML输出，那么这根本不是问题。

我已经对它做了一些研究，似乎有一百万种方法可以实现我正在寻找的东西;通过连接输入中的ID和价格（'5：75.97'样式）然后将它们分开进行操作，一直到HTML搜索最近的复选框并添加数字。他们似乎都会工作;只是想知道理想的解决方案是什么。

例如，如果选择了Invoice 5和12，则变量将等于106.94

非常感谢任何帮助。

<table>
    <tr>
        <th>Invoice #</th>
        <th>Date</th>
        <th>Balance</th>
    </tr>
    <tr>
        <td><input type="checkbox" name="Invoices[]" value="" /> Invoice 5  </td>
        <td>2015-03-03</td>
        <td>75.97</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="Invoices[]" value="" /> Invoice 8</td>
        <td>2015-03-07</td>
        <td>35.97</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="Invoices[]" value="" /> Invoice 12</td>
        <td>2015-03-01</td>
        <td>30.97</td>
    </tr>
</table>

Answer 1

您可以执行以下操作：fiddle

var sum = 0;
$('input').click(function () {

    if ($(this).is(':checked')) {
        var price = $('.price');
        var add = ($(this).closest('tr').find(price).html());
        add = parseFloat(add).toFixed(2);
        sum += +add;
        console.log(sum);
    } else if (!$(this).is(':checked')) {
        var price = $('.price');
        var add = ($(this).closest('tr').find(price).html());
        add = parseFloat(add).toFixed(2);
        sum -= +add;
        console.log(sum);
    }

});

Answer 2

我将如何做到这一点：

    var totalInvoice;
    $('input').on('change', function(){
        totalInvoice = 0;
        $('input:checked').each(function(){
            totalInvoice += parseFloat($(this).parent().siblings('td:nth-last-child(1)').text());
        });
        console.log(totalInvoice);
    })

请记住，如果您指定由类或其他内容引用的输入，则会更好。

Answer 3

我建议：

// finding the inputs of type=checkbox, binding a change 
// event-handler:
$('table input[type="checkbox"]').on('change', function() {
  // finding the closest <table>:
  var table = $(this).closest('table'),
    // finding the checked checkboxes inside of that <table>:
    checked = table.find('input[type=checkbox]:checked'),
    // getting the last <td> from the <tr> that contains the
    // checked checkboxes:
    prices = checked.closest('tr').find('td:last-child'),
    // iterating over those <td> elements:
    sum = prices.map(function() {
      // creating a map containing the found prices, if the
      // trimmed text is not a number we return 0:
      return parseFloat(this.textContent.trim(), 10) || 0;
    // converting the map to an array, and passing it
    // to the reduce method:
    }).get().reduce(function(a, b) {
      // summing the current value (a) with new value (b):
      return a + b;
    });
  // setting the text of the element whose id="result":
  $('#result').text(sum);
// triggering the change event (in the case of any
// checkboxes being checked on page-load:
}).change();

$('table input[type="checkbox"]').on('change', function() {
  var table = $(this).closest('table'),
    checked = table.find('input[type=checkbox]:checked'),
    prices = checked.closest('tr').find('td:last-child'),
    sum = prices.map(function() {
      return parseFloat(this.textContent.trim(), 10) || 0;
    }).get().reduce(function(a, b) {
      return a + b;
    });
  $('#result').text(sum);
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <th>Invoice #</th>
      <th>Date</th>
      <th>Balance</th>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="Invoices[]" value="" />Invoice 5</td>
      <td>2015-03-03</td>
      <td>75.97</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="Invoices[]" value="" />Invoice 8</td>
      <td>2015-03-07</td>
      <td>35.97</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="Invoices[]" value="" />Invoice 12</td>
      <td>2015-03-01</td>
      <td>30.97</td>
    </tr>
  </tbody>
</table>

<div id="result"></div>

参考文献：

CSS：
JavaScript的：
- Array.prototype.reduce()。
jQuery的：
- change()。
- closest()。
- find()。
- get()。
- map()。

jQuery sum单元格基于相关的复选框选择

3 个答案: