jquery实现全选全不选反选以及遍历取值

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

梦康

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

阅读量1k

点赞数

分类专栏： JS

JS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<title>jQuery实例</title>
		<script type="text/javascript" src="jquery-1.8.2.js"></script>
		<script type="text/javascript">
			//jQuery的快捷入口
			$(function(){
				//获取所有button按钮，并添加点击事件
				$("button").click(function(){
					var b = $(this).html();
					if(b=="全选"){
						$(":checkbox").attr("checked",true);
					}
					
					if(b=="全不选"){
						$(":checkbox").attr("checked",false);
					}
					
					if(b=="反选"){
						var list = $(":checkbox:checked");//先获取选中，
						$(":checkbox").attr("checked",true);//所有选中
						list.attr("checked",false);//将刚才获取选中的，设为不选中
					}
					
					if(b=="取值"){
						var list = $(":checkbox:checked");//先获取选中，
						list.each(function(ob){
							alert(list[ob].value);
						});
					}
				});
			});
			
		</script>
	</head>
	<body>
		<h2>jQuery实例--全选和全不选:</h2>
		<ul>
			<li><input type="checkbox" name="id[]" value="1"/>aaaaaaaa</li>
			<li><input type="checkbox" name="id[]" value="2"/>aaaaaaaa</li>
			<li><input type="checkbox" name="id[]" value="3"/>aaaaaaaa</li>
			<li><input type="checkbox" name="id[]" value="4"/>aaaaaaaa</li>
			<li><input type="checkbox" name="id[]" value="5"/>aaaaaaaa</li>
		</ul>
		<button>全选</button>
		<button>全不选</button>
		<button>反选</button>
		<button>取值</button>
	</body>
</html>

梦康

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery实现全选全不选反选以及遍历取值

jQuery实例 //jQuery的快捷入口 $(function(){ //获取所有button按钮，并添加点击事件 $("button").click(function(){ var b = $(this).html(); if(b=="全选"){ $(":checkbox").attr("checked",true);
复制链接

扫一扫

专栏目录