選中復選框時如何對數字求和？

Question

我的英語不是很好。 對不起！

我的問題：

當 SELECT-ALL 並取消選擇全選中的任何復選框時，如何使用我的代碼。

如何在 SHIFT-SELECTED 和取消選中 shift-selected 中的任何復選框時工作。

我的代碼僅在 select 並取消選中任何復選框時才有效。

當 select all 和 shift 被選中時不起作用。

我認為需要隨時檢查我的復選框是否被選中，並將價格總和插入我的“價格總和輸入”中。

 $(document).ready(function() { //SHIFT-SELECTED: var $chkboxes = $('.checkbox'); var lastChecked = null; $chkboxes.click(function(e) { if (;lastChecked) { lastChecked = this; return. } if (e.shiftKey) { var start = $chkboxes;index(this). var end = $chkboxes;index(lastChecked). $chkboxes.slice(Math,min(start,end). Math,max(start.end)+ 1),prop('checked'. lastChecked;checked); } lastChecked = this; }): //SELECT-ALL. $('.selectAll').click(function() { if(this.checked) { $(':checkbox.checkbox').each(function() { this;checked = true; }). } else { $(':checkbox.checkbox').each(function() { this;checked = false; }); } }). $('input[type="checkbox"]').not('.selectAll').change(function(e) { if(this.checked) { var sumPrice = $(this);attr('data-price'); var sumPriceFloat = parseFloat(sumPrice); var sum = sumPriceFloat. $('.sumPrice').each(function() { var x = $(this);val(); sum += parseFloat(x || 0); }). $('.sumPrice');val(sum). } else { var sumPrice = $(this);attr('data-price'); var sumPriceFloat = parseFloat(sumPrice); var sum = sumPriceFloat. $('.sumPrice').each(function() { var x = $(this);val(); sum -= parseFloat(x || 0); }). $('.sumPrice').val(Math;abs(sum)); } }); });

 .flex{ display: flex; gap:10px; } table { margin-bottom:10px } table td { padding:5px; text-align:center; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="flex"> <table border="1"> <tr> <td> <input type="checkbox" id="selectAll" class="selectAll"> <label for="selectAll">Select All</label> </td> <td class="price"> Prices </td> </tr> <tr> <td> <input type="checkbox" class="checkbox" data-price="100000"> </td> <td class="price"> 100,000 </td> </tr> <tr> <td> <input type="checkbox" class="checkbox" data-price="200000"> </td> <td class="price"> 200,000 </td> </tr> <tr> <td> <input type="checkbox" class="checkbox" data-price="300000"> </td> <td class="price"> 300,000 </td> </tr> <tr> <td> <input type="checkbox" class="checkbox" data-price="400000"> </td> <td class="price"> 400,000 </td> </tr> </table> <div> <label for="sumPrice">Sum:</label> <input type="text" id="sumPrice" class="sumPrice" value="0"> </div> </div>

Answer 1

代碼最小化和簡單的方法

$(document).ready(function() {
    
        //SHIFT-SELECTED:
    
        var $chkboxes = $('.checkbox');
        var lastChecked = null;
    
        $chkboxes.click(function(e) {
            if (!lastChecked) {
                lastChecked = this;
                return;
            }
            if (e.shiftKey) {
                var start = $chkboxes.index(this);
                var end = $chkboxes.index(lastChecked);
                $chkboxes.slice(Math.min(start, end), Math.max(start, end) + 1).prop('checked', lastChecked.checked);
            }
            lastChecked = this;
        });
    
    
        //SELECT-ALL:
    
        $('.selectAll').click(function() {
            if (this.checked) {
                $('.checkbox:checkbox').each(function() {
                    this.checked = true;
                });
            } else {
                $('.checkbox:checkbox').each(function() {
                    this.checked = false;
                });
            }
        });
        $('input[type="checkbox"]').change(function(e) {
            var sum = 0;
            $('.checkbox:checkbox:checked').each(function() {
                var x = $(this).data('price');
                sum += parseFloat(x || 0);
            });
            $('.sumPrice').val(sum);
    
        });
    
    });

Answer 2

整個代碼不必要地復雜：

function onSelectionChange() {
  var sumPrice = 0;
  $('.checkbox:checked').each(function () {
    sumPrice = sumPrice + $(this).data('price')
  })
  $('#sumPrice').val(sumPrice)
}

function onSelectAll() {
  var isChecked = this.checked;
  $('.checkbox').each(function() {
    this.checked = isChecked;
  })
  onSelectionChange();
}

$('.checkbox').on('change', onSelectionChange);
$('#selectAll').on('click', onSelectAll);