前端专题 JQuery实现checkbox全选/全不选效果

最新推荐文章于 2020-08-20 16:06:16 发布

极光雨雨

最新推荐文章于 2020-08-20 16:06:16 发布

阅读量123

点赞数

分类专栏： # H5 CSS JS基础文章标签： jquery javascript

本文链接：https://blog.csdn.net/weixin_44131922/article/details/107875849

版权

H5 CSS JS基础专栏收录该内容

24 篇文章 0 订阅

订阅专栏

直接上代码，内容不多，边看边试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
		<script type="text/javascript">
			$(function(){
				$(".checkall").click(function(){		//直接设置点击事件 相当于匿名方法
					$(".checkone").prop("checked",$(".checkall").prop("checked"))	//全选全不选
				})
				$(".btu").click(function(){				//删除
					var lk = $(".checkone")
					for (var c = 0;c<lk.length;c++) {
						if ($(lk[c]).prop("checked")) {
							$(lk[c]).parent().parent().remove()   //删除一整行的内容
						}
					}
				})
			})
			
		</script>
	</head>
	<body>
		<input type="checkbox" class="checkall" />全选/全不选 <button class="btu" >删除</button>
		<table>
			<tr>
				<th></th>
				<th>name</th>
				<th>price</th>
				<th>date</th>
			</tr>
			<tr>
				<td><input type="checkbox" class="checkone"></td>
				<td>product2</td>
				<td>2343</td>
				<td>2342-4-5</td>
			</tr>
			<tr>
				<td><input type="checkbox" class="checkone"></td>
				<td>product1</td>
				<td>2343</td>
				<td>2342-4-5</td>
			</tr><tr>
				<td><input type="checkbox" class="checkone"></td>
				<td>product3</td>
				<td>2343</td>
				<td>2342-4-5</td>
			</tr>
			
			<tr>
				<td><input type="checkbox" class="checkone"></td>
				<td>product4</td>
				<td>2343</td>
				<td>2342-4-5</td>
			</tr>
		</table>
	</body>
</html>

极光雨雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端专题 JQuery实现checkbox全选/全不选效果

直接上代码，内容不多，边看边试<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.4.1.js" ></script> <script type="text/javascript"> $(func
复制链接

扫一扫