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

时间 2020-01-12 标签 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>