jQuery练习--全选表格和计算器
Posted 栗栗本栗
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery练习--全选表格和计算器相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>全选表格</h1>
<table border="1" cellspacing="0" style="height: 100px;width: 300px">
<thead>
<td><input type="checkbox" id="check"></td>
<th>姓名</th>
<th>性别</th>
<th>爱好</th>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="people"></td>
<td>张三</td>
<td>男</td>
<td>篮球</td>
</tr>
<tr>
<td><input type="checkbox" name="people"></td>
<td>李四</td>
<td>男</td>
<td>足球</td>
</tr>
<tr>
<td><input type="checkbox" name="people"></td>
<td>王五</td>
<td>男</td>
<td>排球</td>
</tr>
</tbody>
</table>
<h1>计算器</h1>
<div>
<label>请输入第一个数字</label>
<input type="number" name="1">
<br>
<br>
<label>请输入第二个数字</label>
<input type="number" name="2">
<br>
<br>
<label>请输入算法符号</label>
<input type="text" name="3">
<br>
<br>
<label>结果</label>
<input type="text" id="res" disabled>
<br>
<br>
<button type="button" id="act">计算</button>
</div>
<div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script>
$('#check').click(function () {
if ($(this).prop("checked")) {
$('[name="people"]').prop("checked", true);
} else {
$('[name="people"]').prop("checked", false);
}
});
$('[name="people"]').click(function () {
if ($('[name="people"]:checked').length == 0) {
$('#check').prop("checked", false);
} else {
$('#check').prop("checked", true);
}
})
$('#act').click(function (){
let a = $('[name="1"]').val();
let b = $('[name="2"]').val();
let c = $('[name="3"]').val();
if(c=="+"){
let r = a+b;
$('#res').prop("value", r);
}
else if(c=="-"){
let r = a-b;
$('#res').prop("value", r);
}
else if(c=="*"){
let r = a*b;
$('#res').prop("value", r);
}
else if(c=="/"){
if(b==0){
$('#res').prop("value", "除数不能为0");
}else{
let r = a/b;
$('#res').prop("value", r);
}
}
else{
$('#res').prop("value", "输入符号错误");
}
});
</script>
</body>
</html>
以上是关于jQuery练习--全选表格和计算器的主要内容，如果未能解决你的问题，请参考以下文章