Добавление нескольких входных данных Не работает с использованием Jquery

#javascript #jquery

Вопрос:

У меня есть простая проблема, которую я, возможно, просто не продумал. Я пытаюсь объединить несколько полей ввода (которые представляют собой форматированные числа, такие как 2.00, 3.00 и т.д.).

Но используя следующий скрипт:

  var sum = parseFloat(0).toFixed(2);
    //using an iterator find and sum the values of checked checkboxes
    $(".amountCheckbox:checked").each(function() {
        var input = parseFloat($(this).closest('tr').find('.amountInput').val());
        console.log(input.toFixed(2));
      sum  = input.toFixed(2);
      console.log(sum);
    });
    return sum;

Он возвращает значение 02.003.00, а не 5.00. Я был бы признателен за любую помощь. Спасибо!

1. toFixed() возвращает строку, так что вы просто выполняете конкатенацию строк

2. Удалите все .toFixed() из своего кода и просто добавьте его один раз с помощью return like return sum.toFixed() , это решит вашу проблему.

Ответ №1:

Как уже указывалось, Number.toFixed() возвращает строку, поэтому вместо добавления чисел выполняется объединение. Попробуйте Array#reduce() метод:

 return $(".amountCheckbox:checked").closest('tr').find('.amountInput')
.map((index,input) =>  input.value).get()
.reduce((acc, cur) => acc   cur, 0);

ДЕМОНСТРАЦИЯ

Показать фрагмент кода

 $(':checkbox').on('change', function() {
    const sum = $(".amountCheckbox:checked")
    .closest('tr').find('.amountInput')
    .map((index,input) =>  input.value).get()
    .reduce((acc, cur) => acc   cur, 0);
    
    console.log( sum.toFixed(2) );
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Row 1</td>
      <td><input type="text" class="amountInput" value="2.00"></td>
      <td><input type="checkbox" class="amountCheckbox"></td>
    </tr>
    <tr>
      <td>Row 2</td>
      <td><input type="text" class="amountInput" value="5.00"></td>
      <td><input type="checkbox" class="amountCheckbox"></td>
    </tr>
    <tr>
      <td>Row 3</td>
      <td><input type="text" class="amountInput" value="1.00"></td>
      <td><input type="checkbox" class="amountCheckbox"></td>
    </tr>
    <tr>
      <td>Row 4</td>
      <td><input type="text" class="amountInput" value="2.20"></td>
      <td><input type="checkbox" class="amountCheckbox"></td>
    </tr>
  </tbody>
</table>

Ответ №2:

toFixed преобразует значение в строку, поэтому вы просто объединяете.

Я думаю, что вы хотите суммировать все значения перед вызовом toFixed и вызвать toFixed после, чтобы отформатировать значение как значение с фиксированной точностью.

  var sum = 0;

    //using an iterator find and sum the values of checked checkboxes
    $(".amountCheckbox:checked").each(function() {
        var input = parseFloat($(this).closest('tr').find('.amountInput').val());
        console.log(input.toFixed(2));
      sum  = input;
      console.log(sum);
    });
    return sum.toFixed(2);

Ответ №3:

Может быть, что-то вроде этого?

 $('table').on('change input','input',ev=>{
 $('#res').text($(".amountCheckbox:checked").get().reduce((a,c)=>
    $(c).closest('tr').find('.amountInput').val() a, 0).toFixed(2))
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr><td><input type="checkbox" class="amountCheckbox"></td><td>A</td>
<td><input value="1.2345" class="amountInput"></td></tr>
<tr><td><input type="checkbox" class="amountCheckbox"></td><td>B</td>
<td><input value="13.114" class="amountInput"></td></tr>
<tr><td><input type="checkbox" class="amountCheckbox"></td><td>C</td>
<td><input value="3.6345" class="amountInput"></td></tr>
</table>
<br>total: <span id="res"></span>

Суммирование происходит в .reduce() функции и выполняется по всем строкам таблицы, где установлен флажок. Каждое входное значение преобразуется в значение с плавающей точкой путем применения унарного оператора . Затем результат суммирования округляется и снова преобразуется в строку в .toString(2) .

Ответ №4:

 var sum = 0;
//using an iterator find and sum the values of checked checkboxes
$(".amountCheckbox:checked").each(function() {
  var input = parseFloat($(this).closest('tr').find('.amountInput').val());
  console.log(input.toFixed(2));
  sum  = input;
  console.log(sum);
});
return sum.toFixed(2);

toFixed() вернет строку, а не числовое значение.