下面代码是使用JQ，实现表格列表的全选和反选功能，实际较为简单，主要做为教学使用：
代码语言：javascript复制<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>表格全选 </title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<div class="row">
<table class="table table-hover table-bordered">
<tbody>
<tr>
<td>选择状态</td>
<td>产品序号</td>
<td>产品名称</td>
<td>库存</td>
<td>存放地</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Alone" class="input-group td-list"/>
</td>
<td>1</td>
<td>大米</td>
<td>2000</td>
<td>盘锦</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Alone" class="input-group td-list"/>
</td>
<td>2</td>
<td>玉米</td>
<td>3232</td>
<td>沈阳</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Alone" class="input-group td-list"/>
</td>
<td>3</td>
<td>猪肉</td>
<td>23232323</td>
<td>新民冷库</td>
</tr>
</tbody>
</table>
<div class="btn-group">
<input type="checkbox" class="form-control" id="all">全选
<input type="checkbox" class="form-control" id="reverse_election">全选
</div>
</div>
</div>
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
<script>
$("#all").click(function () {
var status = $(this).is(":checked");
$(".td-list").prop("checked", status);
});
$("#reverse_election").click(function () {
//更改成全选状态
$(".td-list:checkbox").each(function () {
//遍历所有复选框，然后取值进行 !非操作
$(this).prop("checked", !$(this).prop("checked"));
})
});
</script>
</html>
