jquery 实现全选，全不选，反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<style>
table {
text-align: center;
}
table tr td:nth-child(1) {
width: 20px;
text-align: center;
}
</style>
<script>
$(function () {
$("#select_all").click(function () {
if (this.checked) {
$("#tbody :checkbox").prop("checked", true);
} else {
$("#tbody :checkbox").prop("checked", false);
}
});
$('#add').click(function () {
window.location.href = '/add.html/'
})
$('#update').click(function () {
var choose = $('input[name="select_one"]:checked')
var len = choose.length
if (len != 1) {
alert('请选择一条记录!')
} else {
number = $(choose[0]).val()
alert('选择的数据的value:' + number)
// window.location.href = '/update.html/?number=' + number
}
})
$('#delete').click(function () {
var choose = $('input[name="select_one"]:checked')
var len = choose.length
if (len == 0) {
alert('请选择一条或多条数据!')
} else {
var ids = ''
$('input[name="select_one"]:checked').each(function () {
ids += $(this).val() + ','
});
alert('选中的value(逗号区分):' + ids)
if (confirm('确认删除?')) {
window.location.href = '/delete/?number=' + ids
}
}
})
})
</script>
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<h3 class="text-center">
新生入学信息管理系统
</h3>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<button type="button" id="add" class="btn btn-primary">
<span class="glyphicon glyphicon-plus"></span>添加
</button>
<button type="button" id="update" class="btn btn-success">
<span class="glyphicon glyphicon-pencil"></span>修改
</button>
<button type="button" id="delete" class="btn btn-info">
<span class="glyphicon glyphicon-trash"></span>删除
</button>
<button type="button" class="btn btn-primary">
<span class="glyphicon glyphicon-refresh"></span> 刷新
</button>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<td><input type="checkbox" name="select_all" id="select_all"></td>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>学院</td>
<td>班级</td>
<td>考区</td>
<td>入学时间</td>
<td>语种</td>
<td>出生年月</td>
<td>名族</td>
<td>分数</td>
<td>邮箱</td>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td><input type="checkbox" name="select_one" value="1506010416"></td>
<td>1506010416</td>
<td>张良</td>
<td>男</td>
<td>电信学院</td>
<td>计算15-4班</td>
<td>北京</td>
<td>2020年12月15日</td>
<td>日语</td>
<td>1996年9月16日</td>
<td>哈尼族</td>
<td>520.0</td>
<td>1150646501@qq.com</td>
</tr>
<tr>
<td><input type="checkbox" name="select_one" value="1506010417"></td>
<td>1506010417</td>
<td>焰灵姬</td>
<td>女</td>
<td>矿业学院</td>
<td>计算15-4班</td>
<td>北京</td>
<td>2020年12月15日</td>
<td>日语</td>
<td>1996年4月15日</td>
<td>哈尼族</td>
<td>549.0</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
