复选框全选全不选

HGG-

于 2019-08-18 10:19:56 发布

阅读量223

点赞数

分类专栏： web前端

本文链接：https://blog.youkuaiyun.com/qq_40959562/article/details/99701885

版权

web前端专栏收录该内容

17 篇文章

订阅专栏

<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>