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

Question

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" />

Answer 1

为什么我们一起使用“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);
      });
    });

Answer 2

这就是我使用 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 的评论和您的问题之后更新了它。

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

花了一段时间才明白你的意思。 您只想对所有选中的复选框值求和？

 $(() => $('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" />