подсчитать количество в проверенной строке и обновить элемент div - PullRequest
Новая
       6

подсчитать количество в проверенной строке и обновить элемент div

1 голос
/ 23 января 2020

enter image description here

Я сделал 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 Ответ

0 голосов
/ 23 января 2020

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 .

...