这是我用来计算多项选择测验的测试代码。
<!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。
当用户单击任何问题编号的“正确”和“不正确”选项时，它将点-1加到总数中。例如，用户单击问题1的所有复选框，它应该仅将-1加到总数中（在上面的示例中是-2，即= 1-1-1-1。）即。如果用户选中了上面示例中的所有复选框，则总计为-10。但是我的要求是只显示-5。即= -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);
});
});
关于javascript - 多个复选框的jQuery计算，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20311093/