jQuery复选框-全选、全不选

最新推荐文章于 2018-06-28 16:34:59 发布

jeo_chow

最新推荐文章于 2018-06-28 16:34:59 发布

阅读量354

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/jeo_chow/article/details/52206219

版权

jQuery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>练习-复选框</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!-- 记得引入jquery-1.11.3.js文件到js目录下 -->
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <style type="text/css">
    	body{
    		font-family: "Microsoft YaHei";
    		text-align: center;
    	}
    	#mainDiv {
    		width: 100%;
    		text-align: center;
    		margin-top:10px;
    	}
    </style>

    <script type="text/javascript">
     /*
		To retrieve and change DOM properties 
			such as the checked, selected, or disabled state of form elements, 
			use the .prop() method. 
		根据官方的建议：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，
			其他的使用 attr()
		*/
		
    	$(document).ready(function(){
    		//1. 全选/全不选
    		$("#all").click(function(){
    			//分析： 子复选框状态，与父复选框状态一致
    			// 1.1 获取当前复选框状态
    			var flag = this.checked;  // this 是dom元素
    			// 1.2 选取子复选框，设置状态（父复选框状态）
    			//$(":checkbox[name='course']").attr("checked",flag);
    			$(":checkbox[name='course']").prop("checked",flag);
    		});
    		
	    	//2. 反选
    		$("#btn1").click(function(){
	    		$(":checkbox[name='course']").each(function(){
	    			//2.1 获取当前选中状态
	    			var flag = $(this).prop("checked");
	    			//2.2 反选
	    			$(this).prop("checked", !flag);
	    		});
	    		
	    		clickCourse();
    		});
	    	//3.将选中的设置为没有选中
    		$("#btn2").click(function(){
	    		$(":checkbox[name='course']:checked").each(function(){
	    			//this.checked = false;
	    			$(this).prop("checked", false);
	    		});
	    		
	    		clickCourse();
    		});
	    	
	    	//4. 将没有选中的设置为选中
    		$("#btn3").click(function(){
	    		$(":checkbox[name='course']:not(:checked)").each(function(){
	    			//this.checked = true;
	    			$(this).prop("checked", true);
	    		});
	    		
	    		clickCourse();
    		});
	    	
	    	//5. 给子复选框添加事件
	    	// 当选中的子复选框长度 == 子复选框总长度， 父复选框选中； 
	    	// 否则，父复选框取消选中
	    	$(":checkbox[name='course']").click(clickCourse);
	    	
	    	// 点击每一个自复选框，判断是否选择父复选框
	    	function clickCourse(){
	    		if ($(":checkbox[name='course']:checked").length == $(":checkbox[name='course']").length) {
	    			$("#all").prop("checked",true);
	    		}else{
	    			$("#all").prop("checked",false);
	    		}
	    	}
    	});
    </script>
  </head>
  
  <body>
    <div id="mainDiv">
    	<p>itcast学科选择：<input type="checkbox" name="courseAll" id="all"><label for="all">全选/全不选</label></p>
    	<input type="checkbox" name="course" value="Java" id="java" >
    	<label for="java">Java</label>
    	<input type="checkbox" name="course" value="IOS" id="ios" >
    	<label for="ios">IOS</label>
    	<input type="checkbox" name="course" value="Android" id="android" >
    	<label for="android">Android</label>
    	<input type="checkbox" name="course" value=".Net" id="net" >
    	<label for="net">.Net</label>
    	<input type="checkbox" name="course" value="PHP" id="php" >
    	<label for="php">PHP</label>
    	<input type="checkbox" name="course" value="网页平面" id="ui" >
    	<label for="ui">网页平面</label>
   	</div>
   	<br><br>
   	<hr>
   	<input type="button" id="btn1" value="反选">
   	<input type="button" id="btn2" value="将选中的设置为没有选中">
   	<input type="button" id="btn3" value="将没有选中的设置为选中">
  </body>
</html>

jeo_chow

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery复选框-全选、全不选

练习-复选框 body{ font-family: "Microsoft YaHei"; text-align: center; } #mainDiv { width: 100%; text-align: center; margin-top:10px; }
复制链接

扫一扫