复选框全选全不选
作者：互联网
<html>
<head>
<title>复选框全选全不选</title>
<meta charset="utf-8"/>
<script src="js/jquery-3.3.1.js"></script>
<script>
window.onload=function(){
//获得表格
var tab = document.getElementById("tab1");
//获得行数
var l= tab.rows.length;
//遍历行tab.rows,隔行换色
for(var i=0;i<l;i++){
if(i%2==0){
tab.rows[i].style.backgroundColor="yellow";
}else{
tab.rows[i].style.backgroundColor="pink";
}
}
}
/*function checkAll(){
//获得表头行的复选框
//var selectAll=document.getElementById("selectAll");
//获得表格体中的所有复选框
var ids = document.getElementsByName("ids");
//判断总复选框是否被选中
if($(selectAll).prop("checked")){
$.each(ids,function(i,n){
$(ids[i]).prop("checked",true);
});
}else{
$.each(ids,function(i,n){
$(ids[i]).prop("checked",false);
});
}*/
/*if(selectAll.checked==true){
//上面总复选框被选中，则需改表格体中所有复选框为选中
for(var i=0;i<ids.length;i++){
ids[i].checked=true;
}
}else{
//上面总复选框未被选中，则需改表格体中所有复选框checked设置为false
for(var i=0;i<ids.length;i++){
ids[i].checked=false;
}
}*/
//}
function checkAll(){
var selectAll = $("#selectAll");
var ids=$("[name='ids']");
if(selectAll.prop("checked")){
ids.prop("checked",true);
}else{
ids.prop("checked",false);
}
}
</script>
</head>
<body>
<center><h1>JS实现隔行换色！！！</h1></center>
<table id="tab1" border="1" align="center" width="700px" height="200px" >
<thead>
<tr>
<th><input type="checkbox" id="selectAll" onclick="checkAll()"/></th>
<th>序号</th>
<th>学科</th>
<th>描述</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="ids"/></td>
<td>1</td>
<td>java</td>
<td>万物皆对象，学了java不愁没对象！</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="ids"/></td>
<td>2</td>
<td>大数据</td>
<td>海量数据的存储分析与处理，超强大的！</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="ids"/></td>
<td>3</td>
<td>前端</td>
<td>网站和APP的页面全是他们写出来的，厉害吧！</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tbody>
</table>
</body>
</html>
标签：rows,java,复选框,隔行,全选,全不选,tab,var 来源： https://blog.csdn.net/qq_40959562/article/details/99701885