Question

我目前正在寻求有关此事的帮助。这里的问题是，与其执行复选框值+先前的值，不如将其添加在一起，就像放置“ 10”，而在其他复选框单击之后，它向其中添加值，而不是像“ 1020”一样对它进行计数，而不是执行10 +20

$(document).ready(function() {


  $("input[type=checkbox]").click(function() {
    var total = 0;
    $("input[type=checkbox]:checked").each(
      function() {
        total = total + parseInt($(this).val());

      });
    var input = document.getElementById("valor");
    input.value += input.value + total;

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Comissões Técnicas</label>
<label class="container newlabel">CPT
                          <input type="checkbox"  value="10"  name="cpt" >
                          <span class="checkmark"></span>
                    </label><br>
<label class="container newlabel">CPGA (Gratuito para Sócios da SPG)
                          <input type="checkbox"  value="10"  name="cpga" >
                          <span class="checkmark"></span>
                    </label><br>
<input id="valor" type="text">

Answer 1

检查是否同时应处理repeatedly得分上的click uncheck上的问题。

    $(document).ready(function() {
      
      $("input[type=checkbox]").click(function() {
          var total = 0;
          total = parseInt(document.getElementById("valor").value);
          if(isNaN(total)){
            total = 0;
          }
          if($(this).prop('checked')){
              total = total + parseInt($(this).val());
          } else {
              total = total - parseInt($(this).val());
          };
          var input = document.getElementById("valor");
          input.value = total;
       });
    });

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <label>Comissões Técnicas</label>
    <label class="container newlabel">CPT
                                  <input type="checkbox"  value="10"  name="cpt" >
                                  <span class="checkmark"></span>
                            </label><br>
    <label class="container newlabel">CPGA (Gratuito para Sócios da SPG)
                                  <input type="checkbox"  value="20"  name="cpga" >
                                  <span class="checkmark"></span>
                            </label><br>
    <input id="valor" type="text">

Answer 2

代码

input.value += input.value + total;

表示（因为input.value是String），在确保input.value是total之后，将total与String连接起来。请勿使用+=，并确保在要用作数字的任何内容上使用parseInt()。

$(document).ready(function() {
  $("input[type=checkbox]").click(function() {
    var total = 0;
    $("input[type=checkbox]:checked").each(
      function() {
        total = total + parseInt($(this).val());

      });
    var input = document.getElementById("valor");

    /*
     * You don't need +=
     * You do need to parseInt
     * You need to make sure to handle empty String ""
     */
    input.value = (parseInt(input.value, 10) || 0) + total;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label>Comissões Técnicas</label>
<label class="container newlabel">CPT
  <input type="checkbox"  value="10"  name="cpt" >
  <span class="checkmark"></span>
</label>
<br>
<label class="container newlabel">CPGA (Gratuito para Sócios da SPG)
  <input type="checkbox"  value="10"  name="cpga" >
  <span class="checkmark"></span>
</label><br>
<input id="valor" type="text">

Answer 3

如果我不太了解您的问题，请纠正我，但是您是否不应该仅将input.value += input.value + total;更改为input.value = total;以获得所需的结果？

Answer 4

当您使用jQuery时，我喜欢使用reduce方法，我可以为您提供此解决方案的建议

$(document).ready(function() {

  $("input[type=checkbox]").click(function() {
    var total = $('input[type=checkbox]:checked').toArray().reduce(function(pre, post) {
      return pre + parseInt($(post).val());
    }, 0);
    $('#valor').val(total);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Comissões Técnicas</label>
<label class="container newlabel">CPT
                                  <input type="checkbox"  value="10"  name="cpt" >
                                  <span class="checkmark"></span>
                            </label><br>
<label class="container newlabel">CPGA (Gratuito para Sócios da SPG)
                                  <input type="checkbox"  value="20"  name="cpga" >
                                  <span class="checkmark"></span>
                            </label><br>
<input id="valor" type="text">

如果value始终是数字，则可以使用value / 1将数字字符串转换为数字类型。仅当您确定数字将始终是数字而不是包含数字的字符串（例如）时，才需要这样做。 11.jpg无效。

这是针对您的案例的性能测试： https://jsperf.com/parseint-versus-divide-by-one/1

因此您可以将代码重写为：

$(document).ready(function() {

  $("input[type=checkbox]").click(function() {
    var total = 
    $('input[type=checkbox]:checked').toArray().reduce(function(pre, post) {
      var val = $(post).val() / 1;
      return pre + (val ? val : 0);
    }, 0);
    $('#valor').val(total);
  });
});

根据复选框更改价格

4 个答案: