计算选中行中的数量并更新 div 元素

Question

我制作了一个div来显示清点数量（总计）

<div style='font-size:18px;'>Total : <div id='total_qty_chk' style='display:none' value=''></div> </div>

然后我做了一个 jquery 来计算任何行中每个选中的复选框，

  $(document).ready(function() {

var total_qty_chkd = document.getElementbyId('#total_qty_chk'); //display count
total_qty_chkd.value = 0;
var chkqty1 = document.getElementsByClassName('txtbtsclass'); //qty value saved here


    $("input:checkbox").on("change", function () { //when clicked

        $.each($("input[id='chkajax']:checked"), function(){    //count every clicked checkbox        
            Number(total_qty_chkd.value) = Number(total_qty_chkd.value) + Number(chkqty1.value);
        });
        total_qty_chkd.toggle();

    });


});

例如，当我点击第一个和第二个复选框时，总计将显示值 36.8

有人可以帮我解决这个问题吗？任何帮助将不胜感激。

Answer 1

closest() 和 find() 是你获得价值的朋友。

$("input:checkbox").on("change", function() {
  var sum = 0;
  $.each($("input[class='chkajax']:checked"), function() {
    sum += Number($(this).closest('tr').find('td:last').text());
  });
  $('#total_qty_chk').toggle($(".chkajax:checked").length > 0 );
  $('#total_qty_chk').text(sum);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type="checkbox" class="chkajax"></td>
    <td>o5242</td>
    <td>14</td>
  </tr>
  <tr>
    <td><input type="checkbox" class="chkajax"></td>
    <td>o5245</td>
    <td>22.8</td>
  </tr>

</table>
<div style='font-size:18px;'>Total :
  <div id='total_qty_chk' style='display:none' value=''></div>
</div>

注意：1. 您没有提供任何 html，所以我假设它是 table。同样的事情也适用于 div。 2。 ID 必须是唯一的，所以使用 class 而不是 id.

计算选中行中的数量并更新 div 元素

count qty in checked row and update div element

checkbox

jquery

jquery-selectors