title: Rails Jquery compute total from selected checkboxes in a table
body: <p>So here is my rails view which has a form which pulls the product_items and lets the user check all the items they want to buy and display the total order amount underneath the table. (attached pic)
  <a href="https://i.stack.imgur.com/7FvH8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7FvH8.png" alt="this is the screenshot of the view"></a></p>
  
  <p>My code looks like below. The server side is good (where I can save the order) but I need some help on the client side js to compute the order total and displaying the order total underneath the table.</p>
  
  <pre><code>    &lt;tbody&gt;
      &lt;% @cause.product.product_items.each do |item|  %&gt;
      &lt;tr&gt;
        &lt;td width="60%"&gt;&lt;label class="checkbox"&gt;&lt;%= f.check_box(:items, { multiple:true, class: 'item_checkbox' }, item.id, nil) %&gt;&lt;i&gt;&lt;/i&gt;&lt;%= item.title %&gt;&lt;/label&gt;&lt;/td&gt;
  
        &lt;td&gt;
          &lt;label class="select"&gt;
          &lt;select name="items[&lt;%= item.id %&gt;][qty]"&gt;
          &lt;option value="0" selected disabled&gt;Qty&lt;/option&gt;
          &lt;option value="1"&gt;1&lt;/option&gt;
          &lt;option value="2"&gt;2&lt;/option&gt;
          &lt;option value="3"&gt;3&lt;/option&gt;
          &lt;option value="4"&gt;4&lt;/option&gt;
          &lt;option value="5"&gt;5&lt;/option&gt;
          &lt;option value="6"&gt;6&lt;/option&gt;
          &lt;option value="7"&gt;7&lt;/option&gt;
          &lt;option value="8"&gt;8&lt;/option&gt;
          &lt;option value="9"&gt;9&lt;/option&gt;
          &lt;option value="10"&gt;10&lt;/option&gt;
  
          &lt;/select&gt;
          &lt;i&gt;&lt;/i&gt;
          &lt;/label&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;b&gt;&lt;big&gt;&lt;%= number_to_currency(item.price, precision: 0) %&gt;&lt;/big&gt;&lt;/b&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;% end %&gt;
  
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;label&gt;&lt;strong&gt;Total order amount: &lt;/strong&gt;&lt;span class="lead" id="order_amount"&gt;&lt;/span&gt;&lt;/label&gt;
  </code></pre>
  
  <p>Here is some js, I wanted to identify the checkbox which is checked and grab the qty in that table row (again not sure how to do this)</p>
  
  <pre><code>$(".item_checkbox").change(function() {
    if ($(this).is(":checked")) {
  
     alert($(this).siblings($('#select option:selected').text()));
    }
  });
  </code></pre>