jQuery实现多选框的全选与反选

最新推荐文章于 2022-04-02 15:41:48 发布

.非友

最新推荐文章于 2022-04-02 15:41:48 发布

阅读量474

点赞数

文章标签： js jquery

本文链接：https://blog.csdn.net/qq_45251173/article/details/109098998

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全选与反选</title>
		<script src="js/jquery-1.8.2.min.js"></script>
	</head>
	<body>
		<form>
			<input type="checkbox" name="checks" value="白虎志" />白虎志<br />
			<input type="checkbox" name="checks" value="青龙志" />青龙志<br />
			<input type="checkbox" name="checks" value="瑞麟志" />瑞麟志<br />
			<input type="checkbox" name="checks" value="朱雀志" />朱雀志<br />
			<input type="checkbox" name="checks" value="玄武志" />玄武志<br />
		</form>
		
		<button onclick="qx()">全选</button>
		<button onclick="fx()">反选</button>
		
		<script type="text/javascript">
			function qx(){
				var qx = $("form :checkbox").attr({checked:true});
				console.log(qx);
			}
			function fx(){
				$("form :checkbox").each(function(i){
					if($(this).attr("checked")){
						$(this).attr({checked:false})
					}else{
						$(this).attr({checked:true})
					}
				});
			}
			
			$(function() {
			});
		</script>
	</body>
</html>

效果图：
全选与反选

.非友

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
jQuery实现多选框的全选与反选

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>全选与反选</title> <script src="js/jquery-1.8.2.min.js"></script> </head> <body> <form> <input type="checkbox" name="c
复制链接

扫一扫