Question

我在检查某些复选框时显示复选框值的总和。它的工作正常。我需要在页面加载时显示所有复选框值总计，如果选中或不检查则无关紧要。截至目前，它仅显示选中复选框时的总计。有人帮我。

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

<title> Calc</title>

<script type='text/javascript'>
$(function() {
    $(".tot_amount").click(function(event) {
        var total = 0;
        $(".tot_amount:checked").each(function() {
            total += parseInt($(this).val());
        });
        $("#tot_amount").val(sum.toFixed(3));

        if (total == 0) {
            $('#total1').val('');
        } else {
            $('#total1').val(total);
        }
    });

});
</script>

</head>

<body>
<table border="1">
<tr><td>10<input type="checkbox" class="tot_amount" value="10"></td></tr>
<tr><td>20<input type="checkbox" class="tot_amount" value="20"></td></tr>
<tr><td>30<input type="checkbox" class="tot_amount" value="30"></td></tr>
<tr><td>40<input type="checkbox" class="tot_amount" value="40"></td></tr>
<tr><td>50<input type="checkbox" class="tot_amount" value="50"></td></tr>
<tr><td>60<input type="checkbox" class="tot_amount" value="60"></td></tr>
<tr><td>70<input type="checkbox" class="tot_amount" value="70"></td></tr>

<tr><td>Total<input type="text" id="total1" readonly></td></tr>
</table>

</body>

@Ali ...它的工作但我有一个小问题。让我解释。首先，我无法对你的部分发表评论。当我点击添加评论没有发生任何事情，所以我在这里添加我的评论。一切正常。在页面加载它显示总计，当我检查任何复选框显示总和。一切都很好。但我还需要一个功能。如果我取消选中所有复选框，它也应该显示页面加载中的总数。如何实现这一目标？

Answer 1

创建方法

function getTotal(isInit) {

  var total = 0;
  var selector = isInit ? ".tot_amount" : ".tot_amount:checked";
  $(selector).each(function() {
    total += parseInt($(this).val());
  });
  if (total == 0) {
    $('#total1').val('');
  } else {
    $('#total1').val(total);
  }

}

然后从点击和加载事件中调用它

喜欢这个

$(function() {
  $(".tot_amount").click(function(event) {
    getTotal();
  });
  getTotal(true);
});

的 DEMO

Answer 2

我认为您需要预先计算所有值。写在

$(document).ready(function(){
    var preTotal=0;

$(".tot_amount").each(function() {
   preTotal+=parseInt($(this).attr("value"));
});

});

for page ready

Answer 3

function getTotal(objSelector)
{
    var total = 0;
    objSelector.each(function () {
        total += parseInt($(this).val());
    });
    $("#tot_amount").val(total.toFixed(3));
    if (total == 0) {
        $('#total1').val('');
    } else {
        $('#total1').val(total);
    }
}
$(document).ready(function () {
    getTotal($(".tot_amount"));
    $(".tot_amount").change(function (event) {
        getTotal($(".tot_amount:checked"));
    });

});

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <title>Calc</title>
        
    </head>
    <body>
        <table border="1">
            <tr><td>10<input type="checkbox" class="tot_amount" value="10"></td></tr>
            <tr><td>20<input type="checkbox" class="tot_amount" value="20"></td></tr>
            <tr><td>30<input type="checkbox" class="tot_amount" value="30"></td></tr>
            <tr><td>40<input type="checkbox" class="tot_amount" value="40"></td></tr>
            <tr><td>50<input type="checkbox" class="tot_amount" value="50"></td></tr>
            <tr><td>60<input type="checkbox" class="tot_amount" value="60"></td></tr>
            <tr><td>70<input type="checkbox" class="tot_amount" value="70"></td></tr>
            <tr><td>Total<input type="text" id="total1" readonly></td></tr>
        </table>
    </body>
</html>

Answer 4

查看我的。这是根据您的要求

$(function(){ 
$(".tot_amount").click(function(event) {
var total = 0;
$(".tot_amount:checked").each(function() {
total += parseInt($(this).val());
});
    //$("#tot_amount").val(sum.toFixed(3));

$('#total1').val(total);

});

});

$(document).ready(function () {
var total2=0;
    $(".tot_amount").each(function() {
total2 += parseInt($(this).val());

});


$('#total1').val(total2);
});

DEMO

jquery显示复选框选中时的总和

4 个答案: