Question

我看了一眼，但可以找到明确的答案。

基本上，我有一个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

Answer 1

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

   $('#total').val(sum);
});

Answer 2

同时假设您正在使用jquery，同时处理检查和取消选中一个框以使用工作jsbin示例更新输入的总和。

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);
}

Answer 3

如果您只想要选中“产品”复选框：

$('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/

没有POSTING值的Sum Checkbox - Javascript

3 个答案: