如果有多个位置，如何寻址到一个位置的两个 INPUT 的值

Question

我是 JQuery 的初学者，所以请帮助简化 Java 脚本中的以下函数（将其转换为 JQuery）。我需要写商品的价格计算器。

一段来自HTML代码

<li>
    <input type="checkbox" class="option" value="5000" id="price-cb-1" onChange="calculate_price();">
    <input id="price-uts-1" class="price-count" type="number" min="1" onchange="calculate_price();" value="1">
</li>
<li>
    <input type="checkbox" class="option" value="9000" id="price-cb-1" onChange="calculate_price();">
    <input id="price-uts-1" class="price-count" type="number" min="1" onchange="calculate_price();" value="1">
</li>

.....

有30个元素

 <li>..</li>

具有不同的值（价格）。我需要将所有价格相加，乘以数量，然后将所有价格相加，得到总金额。那么如何使用JQuery同时处理两个输入的值？

Java 脚本

var sum = 0;    
var prefixCheckbox = "price-cb-";
  for (var i = 1, ids = ($('.price')).length; i<=ids; i++) {
     if (document.getElementById(prefixCheckbox+i).checked === true){
       sum+=(document.getElementById(prefixUnits+i).value)* 
       (document.getElementById(prefixCheckbox+i).value)
      }
$('#total').html(sum);

Answer 1

在两种输入类型的 change 事件中，您可以遍历每个选中的元素，将其值乘以数量。试试这个：

$('.option, .price-count').change(function() {
    var sum = 0;          
    $('.option:checked').each(function() {
        sum += $(this).val() * $(this).next('.price-count').val();
    });

    $('#total').html(sum);
}).change();

Example fiddle

Answer 2

$('.calculator input').on('change', function() {
    var lis = $(this).closest('li:has(:checked)');
    var total = 0
    lis.each(function() {
        total += +$(this).find(':checkbox').val() * +$(this).find('[type=number]').val();
    });
    $('#total').text( total );
})
.trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="calculator">
  <li>
    <input type="checkbox" class="option" value="5000" id="price-cb-1">
    <input id="price-uts-1" class="price-count" type="number" min="1" value="1">
</li>
<li>
    <input type="checkbox" class="option" value="9000" id="price-cb-1">
    <input id="price-uts-1" class="price-count" type="number" min="1" value="1">
</li>
</ul>
TOTAL: 
<div id="total"></div>

如果有多个位置，如何寻址到一个位置的两个 INPUT 的值

How to address to values of the two INPUTs of one position, if there are many positions

javascript

checkbox

jquery

input