主页 / 问题 / 924473
Accepted
Nice
Asked:2020-12-23 22:05:38 +0800 CST2020-12-23 22:05:38 +0800 CST

记录输入值的总和

  • 772

由于某种原因，复选框的总和不会写入最终跨度。注册事件 onchange。但是复选框中的值仅从被选中的那个中写入，其余的是未定义的，因此不会相互累加。

$('input#set_1, input#set_2, input#set_3').change(function() {
  var set_1 = $('input#set_1:checked').val();
  var set_2 = $('input#set_2:checked').val();
  var set_3 = $('input#set_3:checked').val();

  var setup = set_1 + set_2 + set_3;
  $('.setup').html(setup);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <span>Опция 1</span><input id="set_1" type="checkbox" value="3000">
</div>
<div>
  <span>Опция 2</span><input id="set_1" type="checkbox" value="6000">
</div>
<div>
  <span>Опция 3</span><input id="set_1" type="checkbox" value="1000">
</div>

<p>Результат: <span class="setup">0</span> р.</p>

javascript

3 个回答

  1. Best Answer

    最简单的选择是将每个人都放在一个班级，然后.each收集并计数。

    $('input.sum').on('click',function(){
  var sum = 0;

  $('input.sum').each(function (){
    const sumPlus = parseFloat($(this).val());
    if($(this).prop('checked') == true) sum = (sum + sumPlus);
  });

  $('.setup').text(sum);
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <span>Опция 1</span><input class="sum" id="set_1" type="checkbox" value="3000">
</div>
<div>
  <span>Опция 2</span><input class="sum" id="set_1" type="checkbox" value="6000">
</div>
<div>
  <span>Опция 3</span><input class="sum" id="set_1" type="checkbox" value="1000">
</div>

<p>Результат: <span class="setup">0</span> р.</p>

    • 2 

  2. $('input').change(function() {
  var set_1 = parseInt($('#set_1:checked').val(), 10) || 0;
  var set_2 = parseInt($('#set_2:checked').val(), 10) || 0;
  var set_3 = parseInt($('#set_3:checked').val(), 10) || 0;
  var setup = set_1 + set_2 + set_3;
  $('.setup').html(setup);
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span>Опция 1</span><input id="set_1" type="checkbox" value="3000"><br>
<span>Опция 2</span><input id="set_2" type="checkbox" value="6000"><br>
<span>Опция 3</span><input id="set_3" type="checkbox" value="1000"><br>
<p>Результат: <span class="setup">0</span> р.</p>

    • 1

  3. HTML 中的 ID 必须始终是唯一的！

    这是一个通用的 jQuery 工作解决方案：

    $(document).ready(function() {
  var total = 0;
  $('.addition').change(function() {
    if(this.checked) {
      total += parseInt($(this).val());
    } else {
      total -= parseInt($(this).val());
    }
    $('.setup').text(total);
  });
});

    HTML：

    <div>
  <span>Опция 1</span><input id="set_1" class="addition" type="checkbox" value="3000">
</div>
<div>
  <span>Опция 2</span><input id="set_2" class="addition" type="checkbox" value="6000">
</div>
<div>
  <span>Опция 3</span><input id="set_3" class="addition" type="checkbox" value="1000">
</div>

<p>Результат: <span class="setup">0</span> р.</p>
    • 1

相关问题