jQuery实现复选框的全选和全不选

最新推荐文章于 2023-09-26 13:03:56 发布

转载最新推荐文章于 2023-09-26 13:03:56 发布 · 349 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/qq_40087415/article/details/79248592?

文章标签：

#java

jQuery 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的简单全选功能。通过一个全选复选框控制一组普通复选框的状态，当全选框被勾选时，所有普通复选框也会被自动勾选；反之则全部取消勾选。该功能适用于表格数据的选择操作等场景。

                        
                    jQuery实现复选框的全选和全不选效果如图：
 
 
代码如下：
 
 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery实现复选框的全选和全不选</title>
	</head>
	<body>
		<label><input type="checkbox" name="checkall" />全选</label>
		<br><br>
		<label><input type="checkbox" name="checkbox" />复选框1</label>
		<label><input type="checkbox" name="checkbox" />复选框2</label>
		<label><input type="checkbox" name="checkbox" />复选框3</label>
		<label><input type="checkbox" name="checkbox" />复选框4</label>
		<label><input type="checkbox" name="checkbox" />复选框5</label>
		
		<!-- 引入jQuery官方类库 -->
		<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
		<!-- start 全选/全不选 -->
		<script type="text/javascript">
			$('input[name="checkall"]').on("click",function(){
				if($(this).is(':checked')){
					$('input[name="checkbox"]').each(function(){
						$(this).prop("checked",true);
					});
				}else{
					$('input[name="checkbox"]').each(function(){
						$(this).prop("checked",false);
					});
				}
			});
		</script>
		<!-- end 全选/全不选 -->
	</body>
</html>

 
 
 
 

 
 