JQury选择器实现全选、反选

最新推荐文章于 2022-01-06 18:42:02 发布

－TNT－

最新推荐文章于 2022-01-06 18:42:02 发布

阅读量159

点赞数

分类专栏： js 文章标签： jquery

本文链接：https://blog.csdn.net/qq_45630718/article/details/108608487

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

实现全选、反选

<body>

	<form method="post" action="">
	
		您精通的语言:<input type="checkbox" id="checkedAllBox" />全选/全不选 
		
		<br />
		<input type="checkbox" name="items" value="jav" />java
		<input type="checkbox" name="items" value="js" />javascript
		<input type="checkbox" name="items" value="c++" />c++
		<input type="checkbox" name="items" value="python" />python
		<br />
		<input type="button" id="checkedAllBtn" value="全　选" />
		<input type="button" id="checkedNoBtn" value="全不选" />
		<input type="button" id="checkedRevBtn" value="反　选" />
		<input type="button" id="sendBtn" value="提　交" />
	</form>
	<script type="text/javascript" src="要导入的jqury类库的路径"></script>
	<script type="text/javascript">	
		$(function(){		
var $items = $(":checkbox[name=items]");
var items = $("[name='items']");
//全选按钮
$("#checkedAllBtn").click(function(){
items.attr("checked",true);
$("#checkedAllBox").attr("checked",true);
});
//全不选按钮
$("#checkedNoBtn").click(function(){
items.attr("checked",false);
$("#checkedAllBox").attr("checked",false);
});

//反选按钮
$("#checkedRevBtn").click(function(){
items.each(function(){
this.checked = !this.checked;
});
var flag = $("[name='items']:checked").length==4;
$("#checkedAllBox").attr("checked",flag);
});

//提交按钮
$("#sendBtn").click(function(){
$(":checkbox[name='items']:checked").each(function()
alert(this.value);
		});
	});	
	
//全选/全不选
$("#checkedAllBox").click(function(){	items.attr("checked",this.checked);
});	
//全选/全不选复选框与items状态同步
$("[name='items']").click(function(){
var flag = $("[name='items']:checked").length==4;
$("#checkedAllBox").attr("checked",flag);
	});
});		
	</script>
</body>

－TNT－

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQury选择器实现全选、反选

一、实现全选、反选<body> <form method="post" action=""> 您精通的语言:<input type="checkbox" id="checkedAllBox" />全选/全不选 <br /> <input type="checkbox" name="items" value="jav" />java <input type="checkbox" name="items" val
复制链接

扫一扫

专栏目录