选中复选框时，jquery显示总计 [英] jquery show the sum total when checkbox is checked
问题描述
我显示总的复选框值时某些复选框被选中.它的工作正常.我需要在页面加载时显示所有复选框值的总和，与是否选中无关.截至目前，它仅在选中复选框时显示总数.任何人都可以帮助我.
<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>
@阿里...它的工作，但我有一个小问题.让我解释.首先，iam无法对您的部分发表评论.当我单击添加评论时，没有任何反应，所以我在这里添加我的评论.一切正常.在页面上加载其显示总数，当我选中任何复选框时，其显示总数.一切都很好.但是我在这里还需要一个功能.如果我取消选中所有复选框，它也应该显示页面加载中的总数.如何实现这一目标?
创建方法
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);
});
I am showing the total of the checkbox values when certain checkboxes are checked. Its working fine. I need to show all the checkbox values totals on page load, irrelevant if its checked or not. As of now its just showing the total when a checkbox is checked. Anyone to help me.
<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... its working but i have a small issue. Let me explain. First of all iam not able to comment on your section. when i click add comment nothing is happening so iam adding my comment here. Its all working. On page load its showing the totals, and when i check any checkboxes its showing the sum. Its all fine. But i need one more function here. If i uncheck all the checkboxes also it should show the whole total as in page load. How will in achieve this?
Create a method
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);
}
}
Then call it from both click and load event
Like this
$(function() {
$(".tot_amount").click(function(event) {
getTotal();
});
getTotal(true);
});
这篇关于选中复选框时，jquery显示总计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
