实现全选和反选功能

最新推荐文章于 2024-04-02 19:39:43 发布

原创最新推荐文章于 2024-04-02 19:39:43 发布 · 281 阅读

0 ·

CC 4.0 BY-SA版权

全选和反选

//body

<body>
		<input type="checkbox" name="name" value="" />菊花台<br />
		    <input type="checkbox" name="name" value="" />千里之外<br />
		    <input type="checkbox" name="name" value="" />青花瓷<br />
		    <input type="checkbox" name="name" value="" />兰亭序<br />
		    <input type="checkbox" name="name" value="" />超人不会飞<br />
		    <input type="checkbox" name="name" value="" />七里香<br />
		    <input type="checkbox" name="name" value="" />龙战骑士
		</div>
		<br />
		    <input id="c1" type="button" name="name" value="全选" />
		<input id="btn1" type="button" name="name" value="反选" />
		
	</body>

<script type="text/javascript">
			$(function(){
				
			$("#c1").click(function(){
				//获取所有checkbox属性
			var result=$(this).attr("checked",true);
			
				$("input[name='name']").attr("checked",result);
			})
			
			//反选
			$("#btn1").click(function(){
				$("c1").attr("checked",false);
				$("input[name='name']").each(function(){
					$(this).attr("checked",!$(this).attr("checked"));
				})
			})
			})
			
		</script>