|
此代码尚未实现反选和全不选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
table{
width: 420px;
height: 300px;
}
thead{
background-color: rgb(0,141,208);
color: #fff;
}
.bg{
background-color: rgb(247,250,247);
}
tbody tr{
background-color: rgb(238,241,238);
color: rgb(84,85,105);
}
</style>
<body>
<table>
<thead id='j_cbAll'>
<tr>
<th><input type="checkbox"></th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id='j_tbs'>
<tr>
<td><input type="checkbox"></td>
<td>iPone8</td>
<td>8000</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
<script>
//表格变色效果开始
var trs=document.querySelector('tbody').querySelectorAll('tr');
for(var i=0;i<trs.length;i++){
trs[i].onmouseover=function(){
this.className='bg';
}
trs[i].onmouseout=function(){
this.className='';
}
}
// 变色效果结束
//全选 单选效果
var j_cbAll=document.getElementById('j_cbAll').querySelector('input');
var j_tbs=document.getElementById('j_tbs').querySelectorAll('input');
var flag=true;
// 给全选效果绑定事件，如果全选checked，单选全部checked。
j_cbAll.onclick=function(){
// 遍历每个单选按钮
for(var i=0;i<j_tbs.length;i++){
// 更改每个按钮的checked，与全选按钮的checked一致
j_tbs[i].checked=this.checked;
}
}
for(var i=0;i<j_tbs.length;i++){
// 遍历每个单选给每个单选绑定事件
j_tbs[i].onclick=function(){
// 遍历每个单选的checked情况
for(var i=0;i<j_tbs.length;i++){
// 如果其中一个没有checked则全选的checked为false
if(!j_tbs[i].checked){
flag=false;
}
j_cbAll.checked=flag;
}
}
}
</script>
</body>
</html>
|