How to sum numbers when checkbox is checked?

Question

my english is not good. sorry!

my problem :

How to work my code, when SELECT-ALL and de-select any checkbox in select-all.

How to work when SHIFT-SELECTED and de-select any checkbox in shift-selected.

my code only work when select and de-select any checkbox.

and not work when select all and shift selected.

I think need to any time check my Checkbox are checked or not and price sum insert into my "Price Sum Input".

$(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>

Does this answer your question? Trigger a programmatically 'checked' checkbox with jQuery — IISkullsII
– IISkullsII, Commented Aug 4, 2022 at 13:03

Shozab javeed · Accepted Answer · 2022-08-04 13:13:10Z

code minimized and easy way

$(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);
    
        });
    
    });

Mischa · Accepted Answer · 2022-08-04 13:49:19Z

1

The whole code is unnecessarily complicated:

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);

answered Aug 4, 2022 at 13:49

Mischa

1,70110 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to sum numbers when checkbox is checked?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related