<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复选框的全选与单选问题</title>
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<script type="text/javascript" src="../js/bootstrap.min.js" ></script>
<script type="text/javascript" src="../js/jquery-2.1.1.min.js" ></script>
<style>
th{
padding:10px 20px;
}
.add{
margin: 20px 0px;
}
.yel{
background: yellow;
}
</style>
</head>
<body>
<!--练习要求:
1.点击新增按钮,表格增加一行,序号依次递增;同时,如果表头的复选框必定是不被新增的状态
2.点击表头的复选框:
I.选中:表身所有复选框被选中,对应的行变黄;
II.不选中:表身所有复选框不被选中,对应行恢复白色;
3.点击表身的复选框:
I.该行变黄或恢复原来的颜色;
II.当所有表身的复选框被选中,表头的复选框也会被选中;
4.点击删除按钮:
I.删除本行
II.如果删除了本行,恰好其他行都是被选中的状态,则全选按钮也被选中
-->
<form style="text-align: center;">
<input onclick="add()" type="button" class="add" value="新增" />
<table border="1px solid black" align="center" >
<thead>
<tr>
<th><input onclick="selectAll(this)" type="checkbox" class="selectAll" /></th>
<th>序号</th>
<th>删除</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</form>
<script>
//自动生成的序号
var count = 0;
//新增一行,全选按钮不打勾
function add(){
$(".selectAll").prop("checked",false);
count++;
var str = $("<tr><td><input class='each' onclick='selectOne(this)' type='checkbox' /></td>" +
"<td>" + count + "</td><td><input onclick='del(this)' type='button' value='删除' /></td> " +
"</tr>");
$("tbody").append(str);
}
function del(obj){
$(obj).parent().parent().remove();
charge();
}
//每个复选框的点击事件
function selectOne(obj){
//该行变黄
if ($(obj).prop("checked") == true) {
$(obj).parent().parent().addClass("yel");
}else{
$(obj).parent().parent().removeClass("yel");
}
charge();
}
//判断全选按钮是否改被选中
function charge(){
var flag = 0;
for(var i = 0; i < $(".each").length; i++){
if($(".each").eq(i).prop("checked") == true){
flag++;
}
}
//判断表身的复选框是否全部被选中了
if (flag == $(".each").length && flag > 0) {
$(".selectAll").prop("checked",true);
}else{
$(".selectAll").prop("checked",false);
}
}
//总的复选框
function selectAll(obj){
if ($(obj).prop("checked") == true) {
$(".each").prop("checked",true);
$(".each").parent().parent().addClass("yel");
}else{
$(".each").prop("checked",false);
$(".each").parent().parent().removeClass("yel");
}
}
</script>
</body>
</html>
10-27
174
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
07-12
2239
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
02-28