JavaScript实现单选、全选和反选功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript隔行换色</title>
</head>
<style>
body{width: 800px;margin: 50px auto;}
table{
width: 800px;border: 1px solid #ccc;
border-collapse: collapse;
}
td{border: 1px solid #ccc;text-align: center;}
</style>
<body>
<table>
<thead>
<tr>
<td>
<label for="">全选<input type="checkbox" onclick="checkAll()" name="checkAll"></label>
<label for="">反选<input type="checkbox" onclick="checkOut()" name="checkOut"></label>
</td>
<td>标题</td>
<td>状态</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="list" onclick="doCheckAll()"></td>
<td>标题1</td>
<td>已读</td>
</tr>
<tr>
<td><input type="checkbox" name="list" onclick="doCheckAll()"></td>
<td>标题2</td>
<td>已读</td>
</tr>
<tr>
<td><input type="checkbox" name="list" onclick="doCheckAll()"></td>
<td>标题3</td>
<td>已读</td>
</tr>
<tr>
<td><input type="checkbox" name="list" onclick="doCheckAll()"></td>
<td>标题4</td>
<td>已读</td>
</tr>
<tr>
<td><input type="checkbox" name="list" onclick="doCheckAll()"></td>
<td>标题5</td>
<td>已读</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
// 隔行换色
function bgColor(){
var trlist=document.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
// document.getElementsByTagName('tbody')是一个数组，要取其第一个值中tr,所以要加[0]
for(var i=0;i<trlist.length;i++){
if(i%2){
trlist[i].style.background="#d0d8e8";
}else{
trlist[i].style.background="#f2f2f2";
}
}
}
bgColor()
// 全选
function checkAll(){
var lists=document.getElementsByName('list')
// 获取到全选按钮document.getElementsByName('checkAll')，但是这个数组只有一个数据，所以后面加上[0]
var checkall=document.getElementsByName('checkAll')[0]
for(var i=0;i<lists.length;i++){
// 判断全选按钮是否处于选中状态
if(checkall.checked==true){
// 如果点击了全选按钮则改变每一个选择按钮为全选
lists[i].checked=true;
}else{
// 点击全选按钮取消全选时，所有选项变为未选中状态
lists[i].checked=false;
}
}
}
// 全选中去掉一个时，全选按钮也取消掉
function doCheckAll(){
var lists=document.getElementsByName('list')
var checkeds=0
for(var i=0;i<lists.length;i++){
// 判断全选按钮是否处于选中状态
if(lists[i].checked==true){
// 如果点击了全选按钮则改变每一个选择按钮为全选
checkeds++
}
}
if(lists.length==checkeds){
document.getElementsByName('checkAll')[0].checked=true
}else{
document.getElementsByName('checkAll')[0].checked=false
}
}
// 反选
function checkOut(){
var lists=document.getElementsByName('list')
// 获取到全选按钮document.getElementsByName('checkAll')，但是这个数组只有一个数据，所以后面加上[0]
var checkout=document.getElementsByName('checkOut')[0]
for(var i=0;i<lists.length;i++){
// 判断全选按钮是否处于选中状态
if(checkout.checked==true){
// 如果点击了全选按钮则改变每一个选项的选中状态
var temp=lists[i].checked
lists[i].checked=!temp;
}else{
// 点击取消反选按钮，再一次改变选项选中状态，复原到初始状态
var temp=lists[i].checked
lists[i].checked=!temp;
}
}
doCheckAll()
}
</script>
</body>
</html>