时间戳

首页 > 解决方案 > 单击复选框时，将其值添加到文本框值

javascript - 单击复选框时，将其值添加到文本框值

问题描述

I'm looking to update a textbox value when a checkbox is selected, however when a checkbox is selected I get '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" />

标签： javascriptjquery

解决方案

为什么我们一起使用“next()”和“each”。此外，解析 int 并传递 0.01 值将始终水合为 0。尝试删除“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);
      });
    });

推荐阅读