Jquery 的添加全选删除全删

最新推荐文章于 2024-04-17 09:12:12 发布

-久了久了就旧了

最新推荐文章于 2024-04-17 09:12:12 发布

阅读量456

点赞数

分类专栏： js代码

本文链接：https://blog.csdn.net/xiaozhang0414/article/details/78767155

版权

js代码专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-1.11.0.min.js" charset="UTF-8"></script>

	<body>
		用户名：<input type="text" id="name" name="name" /><br/> 密码：
		<input type="password" id="pass" name="pass" /><br/> 邮箱
		<input type="email" id="ema" name="ema" /> <br/>
		<input type="button" id="bnt" value="添加" />
		<input type="button" id="shanchu" value="删除" />
		<table border="1px" cellspacing="0" cellpadding="0" id="tabb">
			<tr>
				<th><input type="checkbox" id="cke" /></th>
				<th>用户名</th>
				<th>密码</th>
				<th>邮箱</th>
				<th>操作</th>
			</tr>
		</table>

	</body>
	<script type="text/javascript">
		$("#bnt").click(function() {
			var name = $("#name").val();
			var pass = $("#pass").val();
			var ema = $("#ema").val();
			var tabb = $("#tabb");

			tabb.append("<tr><td><input type='checkbox' name='cc'/></td><td>" + name + "</td><td>" + pass + "</td><td>" + ema + "</td><td><a href='#' οnclick='dele(this)'>删除</a></td></tr>")

		});

		function dele(t) {
			t.parentNode.parentNode.remove();

		}

		var flas = true;
		//全選/全不选
		var flag = true;
		$("#cke").click(function() {
			var cb = $("input[type=checkbox]");
			for(var i = 0; i < cb.length; i++) {
				cb[i].checked = flag;
			}
			flag = !flag;
		});

		$("#shanchu").click(function() {

			var cbs = $("input[type=checkbox]:checked");

			if(cbs.length == 0) {
				alert("請至少選擇一個")
				return
			}
			for(var i = 0; i < cbs.length; i++) {
				var cb = cbs[i];
				cb.parentNode.parentNode.remove();
			}

			if(cbs.length == 1) {

				$("#table").empty();
			}

		});
	</script>

</html>