jquery - Rails Jquery 计算表格中选定复选框的总数

Question

这是我的 Rails View ，它有一个表单，可以提取 product_items 并让用户检查他们想要购买的所有商品，并在表格下方显示总订单金额。 (附图)

我的代码如下所示。服务器端很好(我可以在其中保存订单)但我需要客户端 js 的一些帮助来计算订单总额并在表格下方显示订单总额。

    <tbody>
    <% @cause.product.product_items.each do |item|  %>
    <tr>
      <td width="60%"><label class="checkbox"><%= f.check_box(:items, { multiple:true, class: 'item_checkbox' }, item.id, nil) %><i></i><%= item.title %></label></td>

      <td>
        <label class="select">
        <select name="items[<%= item.id %>][qty]">
        <option value="0" selected disabled>Qty</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>

        </select>
        <i></i>
        </label>
      </td>
      <td><b><big><%= number_to_currency(item.price, precision: 0) %></big></b></td>
    </tr>
    <% end %>

</tbody>
</table>
</div>
<label><strong>Total order amount: </strong><span class="lead" id="order_amount"></span></label>

这是一些 js，我想识别选中的复选框并获取该表行中的数量(再次不确定如何执行此操作)

$(".item_checkbox").change(function() {
  if ($(this).is(":checked")) {

   alert($(this).siblings($('#select option:selected').text()));
  }
});

Answer 1

为了计算总金额，您必须观察选中/未选中的产品以及发生变化的产品数量的变化。

您可以将 View 更新为如下所示(为简单起见，省略了一些内容):

<table id="product-items">
  <tbody>
    <% @cause.product.product_items.each do |item|  %>
      <%= tag :tr, data: { price: item.price } do %>
        <td>
          <label class="checkbox">
           <%= f.check_box(:items, class: 'item_checkbox', item.id) %>
           <%= item.title %>
          </label>
        </td>
        <td>
          <label class="select">
          <select>...</select>
        </td>
        <td>
          <%= number_to_currency(item.price, precision: 0) %>
        </td>
      <% end %>
    <% end %>
  </tbody>
</table>
<div id='total-amount'></div>

如您所见，我使用了 tag帮助程序以创建名为 price 的 HTML5 数据属性。我这样做是为了让以后更容易获得产品值(value)。

现在，既然您已经有了自己的 View ，您所要做的就是在每次选中/取消选中产品复选框或产品数量发生变化时计算迭代项目列表。你可以有这样的东西:

// This line will add event listeners both to your inputs and selects
// under the #products-items table
$('#product-items input[type=checkbox], #product-items select').change(function(e) {

  // Initialize vars
  var totalAmount = 0;

  // We need only rows that have checked checkboxes
  var $tableRows = $('#product-items tr').has('input[type=checkbox]:checked');

  // Iterate through each row in order get all needed info
  $.each($tableRows, function(i, row) {
    var $row = $(row);

    // Get the quantity for current product
    var quantity = row.find('select').val();

    // You could uncheck the product if quantity is set to 0
    // for better user experience
    if (quantity === 0) {
      $row.find('input').prop('checked', false);
    } else {
      // Get the product price from the data-price attribute
      var price = $row.data('price');

      // I am converting the price to an integer, but you could
      // change that and use parseFloat if you want to
      totalAmount += parseInt(price) * parseInt(quantity);
    }
  });

  $('#total-amount').text('$' + totalAmount);
});

这样每次更改数量或选中/取消选中产品时，都会从头开始计算总金额。