Jq实现checkbox的全选，全不选，反选效果

最新推荐文章于 2021-11-30 20:28:03 发布

_眉目如初

最新推荐文章于 2021-11-30 20:28:03 发布

阅读量577

点赞数 1

分类专栏： jquery 文章标签： html JQ

本文链接：https://blog.csdn.net/Q378532364/article/details/92432515

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天在群聊中看到有人提问怎么实现checkbox的全选，全不选，反选效果，自己做的有bug

html页面

<div id="a" style="width: 400px;overflow: hidden;margin: 50px auto">
		<input type="button" name="" value="全选" id="qx"><br>
		<input type="button" name="" value="不选" id="bx"><br>
		<input type="button" name="" value="反选" id="fx"><br>
		<br>
		<input type="checkbox" name="" value="">我在<br>
		<input type="checkbox" name="" value="">人群中<br>
		<input type="checkbox" name="" value="">看到你<br>
		<input type="checkbox" name="" value="">我看到你<br>
		<input type="checkbox" name="" value="">在人群中<br>
		
	</div>
js页面

$(".list .top .tit").mouseenter(function(){

			var index=$(this).index();
			$(this).parents(".list").find(".ul li").eq(index).show().siblings(".ul li").hide();
		});

		$("#qx").live("click",function(){
			
			$("#hd").find("input").prop("checked",true);
			
		});
		$("#bx").click(function(){
			
			$("#hd").find("input").attr("checked",false);
		});
		$("#fx").click(function(){
			var beixuan=$("#hd :checked");//获取被选中的checkbox
			$("#hd").find("input").attr("checked",true);
			//先全选

				beixuan.removeAttr("checked");
			beixuan.removeProp("checked");
			//删除被选则的checkbox的checked属性

		})