不带POSTING值的求和复选框-Javascript

Sum Checkboxes without POSTING values - Javascript

本文关键字：复选框 -Javascript 求和 POSTING 不带      更新时间：2023-09-26

我环顾四周，但能找到一个明确的答案。

基本上，我有一个Total，有一个ID，我试图在点击复选框后自动更新。

p style="font-size: 1.2em; font-weight: bold;"><b>Total Cost:</b> £<input value="0.00" readonly="readonly" type="text" id="total"/></p>

复选框将具有一个简单的值，例如1.50或类似的值。（这些是动态的）所以

<input name="product" value="<?php echo $count*0.50 ?>" type="checkbox">

这可能很简单！但我并没有掌握Javascript

使用一个工作的jsbin示例处理复选框和取消复选框，以更新输入的总和，也假设您使用的是jquery。

var sum = 0;
var total = $('#total');
var cbox = $('.cbox');
$('.cbox').on('change', function() {
  if ($(this).prop('checked')) {
    sum += parseFloat($(this).val());
    updateTotal();
  } else {
    sum -= parseFloat($(this).val());
    updateTotal();
  }
});
function updateTotal() {
  total.val(sum);
}

$('input[type=checkbox]').change(function() {
   var sum = 0;
   $('input[type=checkbox]:checked').each(function() {
       sum += Number($(this).val());
   });
   $('#total').val(sum);
});

如果您只想要选中的"产品"复选框：

$('input[type="checkbox"][name="product"]').on('change', function() {
  var newtotal = 0;
  $('input[type="checkbox"][name="product"]').filter(":checked").each(function() {
    newtotal = newtotal + Number($(this).val());
  });
  $('#total').val(newtotal);
});

小提琴样品：https://jsfiddle.net/ovqkcqvn/

相关文章：