jquery中全选全不选，以及部分选的实现

最新推荐文章于 2022-01-10 11:00:58 发布

luobotoutou123

最新推荐文章于 2022-01-10 11:00:58 发布

阅读量1.1k

点赞数 1

分类专栏： web 文章标签： jquery实现全选

本文链接：https://blog.csdn.net/luobotoutou123/article/details/69474553

版权

web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

以下代码为实现checkbox里面全选时的操作

<html>
	<head>
		<meta charset="utf-8"/>
		<title>员工表</title>
		<style>
			.emp_contaner{
				text-align:center;
				height:100%;
				padding-top:10px;
				padding-bottom:40px
			}
		    table {
				width:500px;
			    height:50px;
			    border-collapse:collapse; /*设置表格的边框折叠成一个单一的边框*/
				margin:0 auto;  /*设置表格居中*/
				background-color:white; 
            }
			table,tr,td,th {
			    border:1px solid black; /*边框：大小 实线 颜色*/
				text-align:center;  /*表格内容居中*/
				padding:10px;  /*内边距*/
			}
			th{
				background-color:green; 
				color:white;
			}
			tr:hover {
				color:#FF00FF;
				background-color:#ADD8E6;
			}
			
			a:link,a:visited   /* 未访问链接*/
			{
				display:block;
				font-weight:bold;
				color:#FFFFFF;
				background-color:#98bf21;
				text-align:center;
				padding:4px;
				text-decoration:none;
			}
			a:hover,a:active  /* hover 鼠标移动到链接上,active鼠标点击时 */
			{
				background-color:#7A991A;
			}

		</style>
		
		<script type="text/javascript">
			function allCheckbox(){
				var trs = document.getElementById("tab").getElementsByTagName("tr");
	//从数组下标为1的tr标签开始（下标为零时为th标签，不满足），trs[i].getElementsByTagName("td")[0]即td的第一格的内容也就是checkbox的选项框里面的内容
	
				for(var i = 1; i < trs.length;i++){
					document.write(trs[i].getElementsByTagName("td")[0].innerHTML);
				}
				
			}
			
			function allCheckboxOne(){
				var names = document.getElementsByName("checkbox");
				var allcheckbox = document.getElementById("allcheckbox");
				for(var i = 0; i<names.length; i++){
			//当全选勾被选中时，遍历names集合，让每一个勾都设为true
					if(allcheckbox.checked== true){
						names[i].checked = true;
					}else{
						names[i].checked = false;
					}
				}
			}
			
			/*根据单个复选框的选择情况确定全选复选框是否被选中*/
			function selectSingle(){
				var k=0;
				var oInput=document.getElementsByName("checkbox");
				for (var i=0;i<oInput.length;i++){
				   if(oInput[i].checked==false){
					  k=1;
					  break;
					}
				}
				if(k==0){
					document.getElementById("allcheckbox").checked=true;
				}
				else{
					document.getElementById("allcheckbox").checked=false;
				}
			}

		</script>
	</head>
	<body>
		<div class="emp_contaner">  
		    <h3>员工信息表</h3>
			<table id="tab">
				<tr>
				    <th>全选<input type="checkbox" id="allcheckbox" οnclick="allCheckboxOne()"/></th>
					<th>员工编号</th>
					<th>员工名称</th>
					<th>员工部门</th>
					<th colspan="2">操作</th>
				</tr>
				<tr>
				    <td><input type="checkbox" name="checkbox" οnclick="selectSingle();"/></td>
					<td>1001</td>
					<td>张三</td>
					<td>财务部</td>
					<td><a href="#">删除</a></td>
					<td><a href="#">修改</a></td>
				</tr>

				<tr>
					<td><input type="checkbox" name="checkbox" οnclick="selectSingle();"/></td>
					<td>1002</td>
					<td>李四</td>
					<td>人事部</td>
					<td><a href="#">删除</a></td>
					<td><a href="#">修改</a></td>
				</tr>

				<tr>
					<td><input type="checkbox" name="checkbox" οnclick="selectSingle();"/></td>
					<td>1003</td>
					<td>王二</td>
					<td>人事部</td>
					<td><a href="#">删除</a></td>
					<td><a href="#">修改</a></td>
				</tr>
			</table>

		</div>
	</body>
</html>