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

Posted 2023-05-09

【中文标题】计算选中行中的数量并更新 div 元素

【英文标题】：count qty in checked row and update div element

【发布时间】：2020-05-09 07:51:15

【问题描述】：

我制作了一个 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();

    );


);

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

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

【参考方案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，所以我假设它是一个表格。同样的事情也适用于 div。 2。 ID 必须是唯一的，所以使用 class 而不是 id。

【讨论】：

last in find 是否意味着它将选择行中的最后一个 td？

是的。你也可以用 class 找到任何你想要的 id。

如果我想选择一个特定的 td 值该怎么办？喜欢按索引选择？

find('td').eq(index) 0、1、2 的索引，随心所欲:)

替代：.find('td:eq(index)');