javascript - 如何使用 JavaScript 或 jQuery 获得跨度中三个输入值的总和？

Question

我对输入只有一个正值。

var input  = $('[name="1"],[name="2"],[name="3"]'),
    input1 = $('[name="1"]'),
    input2 = $('[name="2"]'),
    input3 = $('[name="3"]'),
    input4 = $('[name="4"]');

input.change(function() {
    var val1 = (isNaN(parseInt(input1.val()))) ? 0 : parseInt(input1.val());
    var val2 = (isNaN(parseInt(input2.val()))) ? 0 : parseInt(input2.val());
    var val3 = (isNaN(parseInt(input3.val()))) ? 0 : parseInt(input3.val());
    input4.val(val1 + val2 + val3);
});
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<input type="number" id="number1" name="1" min="0" max="8"  value="0" />
<input type="number" id="number3" name="3" min="0" max="8"  value="0" />
<input type="number" id="number2" name="2" min="0" max="8"  value="0" />
<input type="number" id="number3" name="3" min="0" max="8"  value="0" />
<span class="total-select" name="4">0</span>

如何在运行时获得答案（无需单击即可获得答案）。

标签： javascripthtmljquery

Answer 1

您可以使用each循环来遍历您的输入并从每个输入中获取所需的值，然后添加它们，然后 $(".total-select").text(val);在您的跨度内使用相同的值

演示代码：

$("input[type=number]").change(function() {
  var val = 0;
  //loop through each inputs
  $("input[type=number]").each(function() {
    //sum values
    val += parseInt($(this).val())
  })
  //put in span
  $(".total-select").text(val);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="number1" name="1" min="0" max="8" value="0" />
<input type="number" id="number3" name="3" min="0" max="8" value="0" />
<input type="number" id="number2" name="2" min="0" max="8" value="0" />
<input type="number" id="number4" name="3" min="0" max="8" value="0" />
<span class="total-select" name="4">0</span>