<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>sum table selected items</title>
<style>
div {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<form>
<table>
<tbody>
<tr>
<td><input type="checkbox" value="50" checked="checked"></td>
<td class="preco">R$50,00<br></td>
</tr>
<tr>
<td><input type="checkbox" value="150"></td>
<td class="preco">R$150,00<br></td>
</tr>
<tr>
<td><input type="checkbox" value="250"></td>
<td class="preco">R$250,00<br></td>
</tr>
<tr>
<td><input type="checkbox" value="660" checked></td>
<td class="preco">R$660,00<br></td>
</tr>
<tr>
<td><input type="checkbox" value="20"></td>
<td class="preco">R$20,00<br></td>
</tr>
</tbody>
</table>
</form>
<div></div>
<script>
var countChecked = function() {
var n = $("input:checked").length;
var sum = 0;
$('input:checked').each(function() {
sum += parseFloat($(this).val());
});
$("div").text(n + (n === 1 ? " is" : " are") + " checked:" + sum);
};
countChecked();
$("input[type=checkbox]").on("click", countChecked);
</script>
</body>
</html>
Sum selected items
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.