网页自动计算成绩
点击即可自动实时计算成绩
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<table id="Order" class="table table-striped">
<tr>
<th>名目</th>
<th>评价1</th>
<th>评价2</th>
<th>评价3</th>
<th>评价4</th>
</tr>
<tr>
<td>语文</td>
<td><label><input name="yuwen" type="radio" value="4"/>1</label></td>
<td><label><input name="yuwen" type="radio" value="3"/>2</label></td>
<td><label><input name="yuwen" type="radio" value="2"/>3</label></td>
<td><label><input name="yuwen" type="radio" value="1"/>4</label></td>
</tr>
<tr>
<td>数学</td>
<td><label><input name="shuxue" type="radio" value="4"/>1</label></td>
<td><label><input name="shuxue" type="radio" value="3"/>2</label></td>
<td><label><input name="shuxue" type="radio" value="2"/>3</label></td>
<td><label><input name="shuxue" type="radio" value="1"/>4</label></td>
</tr>
<tr>
<td>英语</td>
<td><label><input name="yingyu" type="radio" value="4"/>1</label></td>
<td><label><input name="yingyu" type="radio" value="3"/>2</label></td>
<td><label><input name="yingyu" type="radio" value="2"/>3</label></td>
<td><label><input name="yingyu" type="radio" value="1"/>4</label></td>
</tr> <tr>
<td>英语</td>
<td><label><input name="zhengzhi" type="radio" value="4"/>1</label></td>
<td><label><input name="zhengzhi" type="radio" value="3"/>2</label></td>
<td><label><input name="zhengzhi" type="radio" value="2"/>3</label></td>
<td><label><input name="zhengzhi" type="radio" value="1"/>4</label></td>
</tr>
<tr id="trData">
<td colspan="4" style="text-align:right;">总计</td>
<td><span id="total"></span></td>
</tr>
</table>
</div>
<script>
let itemslist = $("input:radio")
itemarray = []
//读取所有的name属性
$.each(itemslist, function (index, val) {
itemarray.push(val.name)
});
newarry = Array.from([...new Set(itemarray)])
//去掉重复元素
console.log(newarry)
$("input:radio").on("click", function () {
alltems = 0
for (items in newarry) {
let s = "[name=" + newarry[items] + "]"
for (var i = 0; i < $(s).length; i++) {
if ($(s)[i].checked == true) {
alltems = parseInt($(s)[i].value) + alltems;
//计算成绩和
}
}
}
$('#total').text(alltems)
//把计算值写到页面上
});
</script>
</body>
</html>
