Question

我有一个基于复选框总值的表格会更新

这是我的表格

<label class="checkbox">
        <input type="checkbox" class="check" value="23">SEO                             
    </label>
    <label class="checkbox">
        <input type="checkbox" class="check" value="34">XYZ 
    </label>                                
    <label class="checkbox">
            <input type="checkbox" class="check" value="45">Logo Design                                  
    </label>


    <span class="product-price" id="total" >45</span>

jQuery我用过

  $('input[type=checkbox]').change(function () {
        var val = parseFloat(this.value),
            totalVal = parseFloat($('#total').val());
        if (this.checked) {
            $('#total').val((totalVal + val).toFixed(2));
        } else {
            $('#total').val((totalVal - val).toFixed(2));
        }
    });

但没有得到更新。可能的错误是什么？任何解决方案

Answer 1

Span属性没有val()属性，但text()

 

    $('input[type=checkbox]').change(function () {
            var val = parseFloat(this.value),
                totalVal = parseFloat($('#total').text());
            if (this.checked) {
                $('#total').text((totalVal + val).toFixed(2));
            } else {
                $('#total').text((totalVal - val).toFixed(2));
            }
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="checkbox">
        <input type="checkbox" class="check" value="23">SEO                             
    </label>
    <label class="checkbox">
        <input type="checkbox" class="check" value="34">XYZ 
    </label>                                
    <label class="checkbox">
            <input type="checkbox" class="check" value="45">Logo Design                                  
    </label>


    <span class="product-price" id="total" >45</span>

Answer 2

改变它：

if (this.checked) {
            $('#total').val((totalVal + val).toFixed(2));
        } else {
            $('#total').val((totalVal - val).toFixed(2));
        }

到

if (this.checked) {
            $('#total').text((totalVal + val).toFixed(2));
        } else {
            $('#total').text((totalVal - val).toFixed(2));
        }

由于span没有value属性，您看到的文字是与之关联的text属性。

Answer 3

只需使用Array#map函数。只需在每次检查时取消选中或取消选中。不需要减法以获取以下方法

＆＃13;

$('input[type=checkbox]').change(function() {
var tot=0;
$('input:checked').map(function(a){
 tot += parseInt($(this).val()) 
})
  $('#total').val(tot.toFixed(2));
 
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<label class="checkbox">
        <input type="checkbox" class="check" value="23">SEO                             
    </label>
<label class="checkbox">
        <input type="checkbox" class="check" value="34">XYZ 
    </label>
<label class="checkbox">
            <input type="checkbox" class="check" value="45">Logo Design                                  
    </label>
    <input id="total">

＆＃13;

jquery根据复选框更新总计

3 个答案: