前端复选框全选功能代码

最新推荐文章于 2025-04-04 00:58:22 发布

试行

最新推荐文章于 2025-04-04 00:58:22 发布

阅读量2.3k

点赞数

分类专栏： JavaScript 前端文章标签：前端 web前端

本文链接：https://blog.youkuaiyun.com/baidu_38995168/article/details/91491194

版权

前端同时被 2 个专栏收录

11 篇文章

订阅专栏

JavaScript

2 篇文章

订阅专栏

html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<html>
			<head>
				<meta charset="utf-8" />
				<title>SheetJS Table Export</title>
			</head>
			<body>
				<table>
					<tr>
						<td><input type='checkbox' id='allCheckBox' onclick='AllSelectCheck()' style='width:20px;height:20px;' name='checkbox' value=''/>全选</td>
						<td t="s" id="sjs-A1">编号</td>
						<td t="s" id="sjs-B1">姓名</td>
						<td t="s" id="sjs-C1">账号</td>
						<td t="s" id="sjs-D1">密码</td>
					</tr>
					<tr>
						<td><input type='checkbox' id='items' style='width:20px;height:20px;' name='checkbox'/>"+i+"</td>
						<td t="s" id="sjs-A2">S001</td>
						<td t="s" id="sjs-B2">张三</td>
						<td t="s" id="sjs-C2">zhangsan</td>
						<td t="s" id="sjs-D2">zhang123</td>
					</tr>
					<tr>
						<td><input type='checkbox' id='items' style='width:20px;height:20px;' name='checkbox'/>"+i+"</td>
						<td t="s" id="sjs-A3">S002</td>
						<td t="s" id="sjs-B3">李四</td>
						<td t="s" id="sjs-C3">lisi</td>
						<td t="s" id="sjs-D3">li1234</td>
					</tr>
					<tr>
						<td><input type='checkbox' id='items' style='width:20px;height:20px;' name='checkbox'/>"+i+"</td>
						<td t="s" id="sjs-A4">S003</td>
						<td t="s" id="sjs-B4">王五</td>
						<td t="s" id="sjs-C4">wangwu</td>
						<td t="s" id="sjs-D4">wang12345</td>
					</tr>
				</table>
			</body>
		</html>
	</body>
</html>

js代码：

<script type="text/javascript" src="jquery.min.js"></script>
<script>
	
	
	 function AllSelectCheck(){
		
	var checkAll=$("input[name='checkbox']");
		var checkbox=$("input[id='allCheckBox']");
		//alert(checkbox);
		if ( checkAll[0].checked == true){
		 checkAll.prop("checked", true);

			//checkAll.attr("checked",checked);
		//alert("good day");
		}else{
		// alert("good day2");
		//checkAll.attr("checked",false);
		  checkAll.prop("checked", false);
		}
	
	}

	
</script>