很久没有写博客了,今天又回头学习了一下原生JS
来写了一个简单的小demo,实现复选框的全选全不选的操作。
实现的效果如下:
具体代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
<title>案例全选全不选</title>
</head>
<body>
<div id="myDiv">
<table class="layui-table">
<colgroup>
<col width="50">
<col height="200">
<col>
</colgroup>
<thead>
<tr>
<th> <input type="checkbox" id="all" /> </th>
<th> 全选 </th>
</tr>
</thead>
<tbody id="myTbody">
<tr>
<td> <input type="checkbox" /> </td>
<td> 土豆烧肉 </td>
</tr>
<tr>
<td> <input type="checkbox" /> </td>
<td> 番茄炒蛋 </td>
</tr>
<tr>
<td> <input type="checkbox" /> </td>
<td> 山药炒肉 </td>
</tr>
<tr>
<td> <input type="checkbox" /> </td>
<td> 鸡蛋火腿 </td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var myTbody = document.getElementById("myTbody");
var allBox = document.getElementById("all");
//获取所有的复选框
var box = myTbody.getElementsByTagName("input");
//为全选按钮添加点击事件
allBox.onclick = function(){
//循环遍历除全选框以外的其他复选框
for(var i=0;i<box.length;i++){
//其他复选框的选中状态等于全选框的选中状态
box[i].checked = this.checked;
}
};
for(var i=0;i<box.length;i++){
//为除全选以外的每个复选框增加点击事件
aaa[i].onclick = function(){
var flag = true;
for(var j=0;j<box.length;j++){
//如果复选框没有被选中,则跳出循环,
if(!box[j].checked){
flag = false;
break;
}
}
allBox.checked = flag;
};
}
</script>
</body>
</html>