<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选与反选</title>
<!--此处引入的css与js需要更换成你本地的地址-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="jquery-2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
/*全选与反选按钮*/
$("#all").click(function() {
var state = $("#all").prop("checked");
if(state == true) {
$("[name='option']").prop("checked", "checked");
} else {
$("[name='option']").prop("checked", "");
}
});
/*------------------------------------------------------------------------------------*/
/*根据复选框是否全部选中来判断全选框是否选中*/
//获取当前页面数据条数
var options = $("[name='option']");
//给每一个复选框加上click事件
$("input[name='option']").click(function() {
//获取当前选中的复选框个数
var i = $("input[name='option']:checked");
//判断复选框选中个数是否等于当前页面数据条数
if(i.length == options.length) { //如果两者值相等那么全选按钮也会选中
$("#all").prop("checked", "checked");
} else { //当两者值不相等时全选框便不会显示选中
$("#all").prop("checked", "");
}
});
});
</script>
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">数据字典</div>
<div class="panel-body">
<table class="table table-bordered table-hover">
<thead>
<tr class="active">
<th style="width: 2%;"><input type="checkbox" id="all"></th>
<th style="width: 28%;">字典ID</th>
<th style="width: 15%;">字典key</th>
<th style="width: 15%;">字典value</th>
<th style="width: 15%;">创建时间</th>
<th style="width: 25%;">编辑</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="option"></td>
<td>Bangalore</td>
<td>560001</td>
<td>Bangalore</td>
<td>560001</td>
<td>
<button type="button" class="btn btn-info btn-xs">编辑</button>
<button type="button" class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox" name="option"></td>
<td>Bangalore</td>
<td>560001</td>
<td>Bangalore</td>
<td>560001</td>
<td>
<button type="button" class="btn btn-info btn-xs">编辑</button>
<button type="button" class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox" name="option"></td>
<td>Bangalore</td>
<td>560001</td>
<td>Bangalore</td>
<td>560001</td>
<td>
<button type="button" class="btn btn-info btn-xs">编辑</button>
<button type="button" class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox" name="option"></td>
<td>Bangalore</td>
<td>560001</td>
<td>Bangalore</td>
<td>560001</td>
<td>
<button type="button" class="btn btn-info btn-xs">编辑</button>
<button type="button" class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
</tbody>
</table>
<nav aria-label="Page navigation" class="pull-right">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号