jquery 全选反选全不选

最新推荐文章于 2023-07-18 11:18:07 发布

原创最新推荐文章于 2023-07-18 11:18:07 发布 · 245 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

jquery 工具专栏收录该内容

1 篇文章

订阅专栏

博客展示了代码及相关交互效果，包括点击全选按钮时全选按钮消失、全不选按钮显示，点击全不选按钮时全不选按钮消失、全选按钮显示，还提及了反选前后的情况，主要围绕前端按钮交互展开。

代码如下:

<table border="1" cellspacing="0" style="text-align: center;">
	<tr>
		<th>
			<input type="button" value="全选" onclick="quan()" id="quan" style="width: 70px;">
			<input type="hidden" value="全不选" onclick="no()" id="noq" style="width: 70px;">
			<input type="button" value="反选" onclick="fan()" style="width: 70px;">
		</th>
	</tr>
	<tr>
		<td>
			<input type="checkbox" >    <!--复选框-->
		</td>
	</tr>
</table>

<script type="text/javascript">
	function quan(){
		var arr=$("input:checkbox");
		arr.each(function(){
			$(this).prop("checked",true);
		})
		$("#quan").prop("type","hidden");
		$("#noq").prop("type","button");
	}
	function fan(){
		var arr=$("input:checkbox");
		arr.each(function(){
			var b=$(this).prop("checked");
			$(this).prop("checked",!b);
		})
	}
	function no(){
		var arr=$("input:checkbox");
		arr.each(function(){
			$(this).prop("checked",false);
		})
		$("#quan").prop("type","button");
		$("#noq").prop("type","hidden");
	}
	
	
</script>

效果如下：
在这里插入图片描述