三种情况下的全选，打钩，不让打钩，空

最新推荐文章于 2021-06-19 20:32:24 发布

Thekingyu

最新推荐文章于 2021-06-19 20:32:24 发布

阅读量861

点赞数

分类专栏： jquery功能文章标签： jquery css

本文链接：https://blog.csdn.net/Thekingyu/article/details/78544308

版权

jquery功能专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-1.11.0.js"></script>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		ul{
			list-style: none;
		}
		.all{
			width: 20px;
			height: 20px;
			border: 1px solid #333333;
			border-radius:10px;
			display: inline-block;
		}
		li{
			width: 20px;
			height: 20px;
			border: 1px solid #333333;
			border-radius:10px;	
		}
		.active{
			background: fuchsia;
		}
		.act{
			background: gold;
		}
	</style>
	<body>
		<div>
			<span class="all"></span><span>全选</span>
		</div>
		<ul class="for">
			<li></li>
			<li></li>
			<li class="" value="1"></li>
			<li></li>
			<li></li>
		</ul>
	</body>
	<script type="text/javascript">
		$(function(){		
			$('.for').find('li').each(function(){				
				var val = $(this).attr('value')
		         if(val == 1 ){
			        $(this).addClass('act')		
		         }	
			})	
		$('li').click(function(){
			if($(this).hasClass('active')){
				$(this).removeClass('active')
			}else{
				$(this).addClass('active')
			}
		})		
		$('.all').click(function(){
			if($(this).hasClass('active')){
				$(this).removeClass('active')
				$('.for').find('li').removeClass('active')
				$('.act.active').removeClass('active')
			}else{
				$(this).addClass('active')
				$('.for').find('li').addClass('active')
				$('.act.active').removeClass('active')
			}
		})		
		})

	</script>
</html>

Thekingyu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三种情况下的全选，打钩，不让打钩，空

*{ margin: 0; padding: 0; } ul{ list-style: none; } .all{ width: 20px; height: 20px; border: 1px solid #333333; border-radius:10px; display: inline-block; } li{
复制链接

扫一扫