Когда флажок установлен, добавьте его значение к значению текстового поля

Question

Я хочу обновить значение текстового поля, когда флажок установлен, однако, когда флажок установлен, я получаю 'NaN'.

Кто-нибудь может увидеть, где я ошибся?

jQuery(document).ready(function($) {
  var sum = 0;
  $('input[type=checkbox]').click(function() {
    sum = 0;
    $('input[type=checkbox]:checked').each(function() {
      var val = parseInt($(this).next().val());
      sum += val;
    });
    $('#sum').val(sum);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="campaignstrategy">
  <h1>Campaign Strategy</h1>
  <input type="checkbox" name="awareness" value="0.01">Awareness<br>
  <input type="checkbox" name="directresponse" value="0.01">Direct Response<br>
</div>

<div class="targeting">
  <h1>Targeting</h1>
  <ul>
    <li>
      <input type="checkbox" name="geographic" value="0.07" id="geographic_checkbox" onclick="GeographicFunction()">Geographic<br>
      <p id="geographic_text" style="display:none">+£0.08 CPC</p>
      <ul>
        <li><input type="checkbox" name="regions,cities&towns" value="0.08" id="regions,cities&towns_checkbox" onclick="RegionsFunction()">Regions, Cities & Towns<br></li>
        <p id="regions,cities&towns_text" style="display:none">+£0.08 CPC</p>
        <li><input type="checkbox" name="ringfencing" value="0.09" id="ringfencing_checkbox" onclick="RingfencingFunction()">Ring-Fencing<br></li>
        <p id="ringfencing_text" style="display:none">+£0.08 CPC</p>
      </ul>
    </li>
  </ul>
  <input id="sum" type="text" />

Answer 1

Почему мы используем "next ()" и "each" вместе. Кроме того, анализ int и передача значения 0.01 всегда приводит к нулю. Попробуйте удалить «next ()» и parseFloat вместо parseInt

jQuery(document).ready(function($) {
      var sum = 0;
      $('input[type=checkbox]').click(function() {
        sum = 0;
        $('input[type=checkbox]:checked').each(function() {
        debugger;
          var val = parseFloat($(this).val());
          sum += val;
        });
        $('#sum').val(sum);
      });
    });

Answer 2

Потребовалось некоторое время, чтобы понять, что вы имели в виду. Вы просто хотите сложить все отмеченные значения флажков?

$(() => 
  $('input[type=checkbox]').on("click", () => 
    $('#sum').val(
      $('input[type=checkbox]:checked')   // checked boxes
        .map((i,fld) => +fld.value).get() // array of values
        .reduce((a,b) => a+b)             // summed
        .toFixed(2)                       // rounded
    )
  )
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="campaignstrategy">
  <h1>Campaign Strategy</h1>
  <input type="checkbox" name="awareness" value="0.01">Awareness<br>
  <input type="checkbox" name="directresponse" value="0.01">Direct Response<br>
</div>

<div class="targeting">
  <h1>Targeting</h1>
  <ul>
    <li>
      <input type="checkbox" name="geographic" value="0.07" id="geographic_checkbox" ">Geographic<br>
      <p id="geographic_text" style="display:none">+£0.08 CPC</p>
      <ul>
        <li><input type="checkbox" name="regions,cities&towns" value="0.08" id="regions,cities&towns_checkbox" ">Regions, Cities & Towns<br></li>
        <p id="regions,cities&towns_text" style="display:none">+£0.08 CPC</p>
        <li><input type="checkbox" name="ringfencing" value="0.09" id="ringfencing_checkbox" ">Ring-Fencing<br></li>
        <p id="ringfencing_text" style="display:none">+£0.08 CPC</p>
      </ul>
    </li>
  </ul>
  <input id="sum" type="text" />

Answer 3

Функция parseFloat() анализирует аргумент (сначала преобразовывая его в строку, если необходимо) и возвращает число с плавающей запятой.

Метод toFixed() форматирует число с использованием записи с фиксированной запятой.

Узнайте больше о toFixed ()

Узнайте больше о parseFloat ()

jQuery(document).ready(function($) {
 var sum = 0;
 $('input[type=checkbox]').click(function() {
    sum = 0;
    $('input[type=checkbox]:checked').each(function(){
       
        sum += parseFloat(this.value);
        
    });
    $('#sum').val(sum.toFixed(2));
 });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="campaignstrategy">
  <h1>Campaign Strategy</h1>
  <input type="checkbox" name="awareness" value="0.01">Awareness<br>
  <input type="checkbox" name="directresponse" value="0.01">Direct Response<br>
</div>


    
  <input id="sum" type="text" />

Answer 4

Вот как бы я сделал это с Vanilla Javascript:

const checkBox = document.querySelector("#checkbox")
const textBox = document.querySelector("#textbox")

checkBox.addEventListener("change", () => {
  textBox.value = checkBox.checked ? textBox.value = parseFloat(textBox.value) + parseFloat(checkBox.value) : textBox.value = 0
})

<input type="text" id="textbox" value="0">
<input type="checkbox" id="checkbox" for="textbox" value="0.08">

Редактировать: Обновлено после комментария @mplungjan и вашего вопроса.