Проверить все - это не добавление всей суммы к общему вводу

Question

У меня есть несколько входов со значениями и итогом в конце формы.

Если я проверяю один вход, он работает, значение добавляется к общему количеству.

Если я отметьте все, он проверяет все флажки, но общая сумма не работает. Из того, что я заметил, он пытается вычислить сумму всех отмеченных флажков, прежде чем проверять все флажки.

Большое спасибо!

$(document).ready(function(){

  $.fn.myFunction = function(){
    sum = 0;
    $('#formular :checkbox:checked').each(function() {
        sum += parseFloat($('#valoare_'+parseInt($(this).attr("id"))).val());
    });

    $('#total').val(sum.toFixed(2));
  }

  $('#formular :checkbox').click(function() {
      $.fn.myFunction();
  });

  $("#checkAll").click(function () {
    $('input:checkbox').not(this).prop('checked', this.checked);
    $.fn.myFunction();
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="formular">
<input id="checkAll" type="checkbox"><label for="checkAll"><b>Select all</b></label><br/>
<input id='1_check' type="checkbox"><input id="valoare_1" name="valoare_1" type="number" value="31.20"><br/>
<input id='2_check' type="checkbox"><input id="valoare_2" name="valoare_2" type="number" value="41.20"><br/>
<input id='3_check' type="checkbox"><input id="valoare_3" name="valoare_3" type="number" value="51.20"><br/>
<input id="total" name="total" type="number" value="0.00">
</form>

Answer 1

Я предлагаю эту версию, в которой я кэширую флажки

$(function() {
  const $check = $('#formular :checkbox[id$=_check]');
  $.fn.myFunction = function() {
    sum = 0;
    $check.each(function() {
      sum += this.checked ? parseFloat($(this).next().val()) : 0;
    });
    $('#total').val(sum.toFixed(2));
  }

  $("#checkAll").on("click", function() {
    $check.prop("checked", this.checked);
    $.fn.myFunction();
  });
  $check.on("click", function() {
    if (!this.checked) $("#checkAll").prop("checked", false)
    $.fn.myFunction()
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="formular">
  <input id="checkAll" type="checkbox"><label for="checkAll"><b>Select all</b></label><br/>
  <input id='1_check' type="checkbox"><input id="valoare_1" name="valoare_1" type="number" value="31.20"><br/>
  <input id='2_check' type="checkbox"><input id="valoare_2" name="valoare_2" type="number" value="41.20"><br/>
  <input id='3_check' type="checkbox"><input id="valoare_3" name="valoare_3" type="number" value="51.20"><br/>
  <input id="total" name="total" type="number" value="0.00">
</form>

Answer 2

#checkAll включено в расчет на сумму, которой не должно быть. Просто перемещен над формой (для тестирования).

Кроме того, вы можете добавить ниже для любого изменения ввода, чтобы оно обновило сумму.

$('#formular input').change(function() {
          $.fn.myFunction();
      });

$(document).ready(function(){

  $.fn.myFunction = function(){
    sum = 0;
    $('#formular :checkbox:checked').each(function() {
        sum += parseFloat($('#valoare_'+parseInt($(this).attr("id"))).val());
    });

    $('#total').val(sum.toFixed(2));
  }

  $('#formular :checkbox').click(function() {
      $.fn.myFunction();
  });
 $('#formular input').change(function() {
      $.fn.myFunction();
  });
  $("#checkAll").click(function () {
    $('input:checkbox').not(this).prop('checked', this.checked);
    $.fn.myFunction();
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="checkAll" type="checkbox"><label for="checkAll"><b>Select all</b></label><br/>
<form id="formular">

<input id='1_check' type="checkbox"><input id="valoare_1" name="valoare_1" type="number" value="31.20"><br/>
<input id='2_check' type="checkbox"><input id="valoare_2" name="valoare_2" type="number" value="41.20"><br/>
<input id='3_check' type="checkbox"><input id="valoare_3" name="valoare_3" type="number" value="51.20"><br/>
<input id="total" name="total" type="number" value="0.00">
</form>

Answer 3

Ваш расчет не работает, потому что у вас нет значения int в checkAll Id. Просто добавьте небольшое условие:

$(document).ready(function(){

  $.fn.myFunction = function(){
    sum = 0;
    $('#formular :checkbox:checked').each(function() {
        const id = parseInt($(this).attr("id"))
        if (id) {
          sum += parseFloat($('#valoare_'+id).val());
        }
    });

    $('#total').val(sum.toFixed(2));
  }

  $('#formular :checkbox').click(function() {
      $.fn.myFunction();
  });

  $("#checkAll").click(function () {
    $('input:checkbox').not(this).prop('checked', this.checked);
    $.fn.myFunction();
  });

});