多复选框jquery计算
Multiple checkbox jquery calculation
这是我计算多选测验的测试代码。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Multiple checkbox calculation</title>
<style>
div {
color: red;
font-size: 35px;
}
</style>
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input[type=checkbox]").click(function() {
var total = 0;
$("input[type=checkbox]:checked").each(
function() {
total += parseInt($(this).val());
});
$("#total").html("tatal:" + total);
});
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th scope="col" width="50px">No:</th>
<th scope="col" width="40px">A</th>
<th scope="col" width="40px">B</th>
<th scope="col" width="40px">C</th>
<th scope="col" width="40px">D</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>
<input type="checkbox" class="css-checkbox" id="squared00" name="fieldMark[correct00]" value="1">
<label for="squared00" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared01" name="fieldMark[correct01]" value="-1">
<label for="squared01" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared02" name="fieldMark[correct02]" value="-1">
<label for="squared02" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared03" name="fieldMark[correct03]" value="-1">
<label for="squared03" class="css-label"></label>
</td>
</tr>
<tr>
<th>2</th>
<td>
<input type="checkbox" class="css-checkbox" id="squared10" name="fieldMark[correct10]" value="1">
<label for="squared10" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared11" name="fieldMark[correct11]" value="-1">
<label for="squared11" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared12" name="fieldMark[correct12]" value="-1">
<label for="squared12" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared13" name="fieldMark[correct13]" value="-1">
<label for="squared13" class="css-label"></label>
</td>
</tr>
<tr>
<th>3</th>
<td>
<input type="checkbox" class="css-checkbox" id="squared20" name="fieldMark[correct20]" value="1">
<label for="squared20" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared21" name="fieldMark[correct21]" value="-1">
<label for="squared21" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared22" name="fieldMark[correct22]" value="-1">
<label for="squared22" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared23" name="fieldMark[correct23]" value="-1">
<label for="squared23" class="css-label"></label>
</td>
</tr>
<tr>
<th>4</th>
<td>
<input type="checkbox" class="css-checkbox" id="squared30" name="fieldMark[correct30]" value="1">
<label for="squared30" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared31" name="fieldMark[correct31]" value="-1">
<label for="squared31" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared32" name="fieldMark[correct32]" value="-1">
<label for="squared32" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared33" name="fieldMark[correct33]" value="-1">
<label for="squared33" class="css-label"></label>
</td>
</tr>
<tr>
<th>5</th>
<td>
<input type="checkbox" class="css-checkbox" id="squared40" name="fieldMark[correct40]" value="1">
<label for="squared40" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared41" name="fieldMark[correct41]" value="-1">
<label for="squared41" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared42" name="fieldMark[correct42]" value="-1">
<label for="squared42" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared43" name="fieldMark[correct43]" value="-1">
<label for="squared43" class="css-label"></label>
</td>
</tr>
</tbody>
</table>
<div id="total"></div>
</body>
</html>
此代码用于多项选择题测验的自动计算。每5道题只有选项"A"正确，其他所有选项都不正确。这是我的要求。
- 当用户点击任何问题编号的唯一选项"正确"时，它会在总数中加1分
- 当用户点击任何问题的唯一选项"不正确"时，总得分将增加1分
- 当用户点击任何问题编号的"正确"answers"不正确"两个选项时，总数加1分。例如，用户点击问题1的所有复选框，它应该只在总数中添加-1（在上面的例子中，它是-2，即=1-1-1。但我的要求是只显示-5。即=-1-1-1-1-1-1
提前谢谢。。
我在http://jsfiddle.net/DYduY/这不是最好的解决方案，但我所做的是计算每行的总数。如果它低于-1，例如-2，则我将行值更改为-1。这样，一行的最大负值为-1。
$(document).ready(function() {
$("input[type=checkbox]").click(function() {
var total = 0;
$("tr").each(function() {
var rowTotal = 0;
$(this).find("input[type=checkbox]:checked").each(
function() {
rowTotal += parseInt($(this).val());
});
if (rowTotal < -1) { rowTotal = -1 }
total += rowTotal;
});
$("#total").html("tatal:" + total);
});
});
得到了更多改进的解决方案。这是jquery代码。
$(document).ready(function() {
$("input[type=checkbox]").click(function() {
var total = 0;
$("tr").each(function() {
var checked = $(this).find( "input:checked").length;
var values = $(this).find( "input[type=checkbox]").map(function() {
return parseInt($(this).val());
}).get();
var minimum = Math.min.apply( this, values );
var rowTotal = 0;
$(this).find("input[type=checkbox]:checked").each(
function() {
rowTotal += parseInt($(this).val());
});
if (checked > 1) { rowTotal = minimum }
total += rowTotal;
});
$("#total").html("tatal:" + total);
});
});
相关文章：
- 使用jQuery计算数组中的对象以更改进度条
- 如何在jquery中使用实时计算求和值
- 通过javascript/jquery从html表中获取值并进行计算
- 如果同一页面上有多个元素使用相同的ID，jQuery将计算价格
- 在jquery和javascript中计算税款
- 计算content中的数字总和使用Jquery可编辑文本
- Jquery日期计算JQUERY4U
- 计算 jQuery 中字符串中的特殊字符
- 计算jquery用户界面的拖放
- 计算 jQuery 的 API 使用情况.如何使用我的jQuery
- 如何计算 jQuery 中的剩余时间
- 如何计算jQuery中每个循环的总时间
- 计算 Jquery 中的元素数量
- 计算 jQuery text(）.Length of Visible 元素而不删除隐藏元素
- 在嵌套在 for 循环 (JavaScript/jQuery） 中的 switch 语句中计算 jQuery 数组的元素
- 在 HTML 中执行动态表计算 - jQuery
- 起始点的时间表计算JQuery/Ajax/其他
- AngularJS如何计算jQuery动态添加的字段?
- 如何重写这个计算?JQuery
- 计算jQuery中选定元素的数量
