JQ应用第6款：jQuery实现的全选、反选和不选功能

一：描述

在购物车时，我们常常用到jQuery的全选、反选、不选、选中某一些值的功能。本身这一功能也不难，对于熟悉jQuery的人来说，几分钟内就能做出来。为什么我要写这一篇文章呢？

一方面，我要把常用到的功能收集起来；

另一方面，对于低版本的jquery来说，有些功能能实现，高版本的jquery有些实现不了。

这一篇文章就为这两方面来做答！jQuery为什么在高版本的浏览器实现不了呢？很明显，高版本的不可能比低版本的落后。我们在项目中对于多版本来说，一般还是喜欢选择高版本。这样在各种性能上都能解释。

二：使用教程

以后我们在示例中，直接使用bootstrap的库了，就不使用自己写的css代码了。一方面bootstrap比较统一，另一方面，大家也不必劳心费神的去解读各种css，直接把注意力放到性能上面。

这个案例取自于《jQuery实现的全选、反选和不选功能》http://www.helloweba.com/view-blog-254.html。为什么我还要复制下来呢？

细心的人发现，我的jquery代码和他的不一样：

1、不用attr了，而用prop。

官方是这么说的：

Attributes模块的变化是移除了attributes和properties之间模棱两可的东西，但是在jQuery社区中引起了一些混乱，因为在1.6之前的所有版本中都使用一个方法(.attr())来处理attributes和properties。但是老的.attr()方法有一些bug，很难维护。jQuery1.6.1对Attributes模块进行了更新，并且修复了几个bug。

我的一句话解释：

attr的bug难解决，用prop。

在实际项目中，我发现，一般情况下还用attr，除了checkbox用prop。

注：因为自己在这方面用的比较少，以后如果发现其他情况，会慢慢修改与补充该文的！

1、HTML代码

<ul id="list" class="list-unstyled">
	<li>
		<input type="checkbox" value="1"> 1.时间都去哪儿了
	</li>
	<li>
		<input type="checkbox" value="2"> 2.海阔天空
	</li>
	<li>
		<input type="checkbox" value="3"> 3.真的爱你
	</li>
	<li>
		<input type="checkbox" value="4"> 4.不再犹豫
	</li>
	<li>
	<input type="checkbox" value="5"> 5.光辉岁月</label>
</li>
<li>
	<input type="checkbox" value="6"> 6.喜欢妳
</li>
</ul>

<input type="checkbox" id="all">
<input type="button" value="全选" class="btn btn-info " id="selectAll">
<input type="button" value="全不选" class="btn btn-info "  id="unSelect">
<input type="button" value="反选" class="btn btn-info "  id="reverse">
<input type="button" value="获得选中的所有值" class="btn btn-info"  id="getValue">

2、JQuery代码

<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<!--[if lt IE 9]>
	<script src="http://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
	<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
<![endif]-->
<script>
	$(function() {
		//全选或全不选
		$("#all").click(function() {
			if (this.checked) {
				$("#list :checkbox").prop("checked", true);
				} else {
				$("#list :checkbox").prop("checked", false);
			}
		});
		//全选  
		$("#selectAll").click(function() {
			$("#list :checkbox,#all").prop("checked", true);
		});
		//全不选
		$("#unSelect").click(function() {
			$("#list :checkbox,#all").prop("checked", false);
		});
		//反选 
		$("#reverse").click(function() {
			$("#list :checkbox").each(function() {
				$(this).prop("checked", !$(this).prop("checked"));
			});
			allchk();
		});
		
		//设置全选复选框
		$("#list :checkbox").click(function() {
			allchk();
		});
		
		//获取选中选项的值
		$("#getValue").click(function() {
			var valArr = new Array;
			$("#list :checkbox[checked]").each(function(i) {
				valArr[i] = $(this).val();
			});
			var vals = valArr.join(',');
			alert(vals);
		});
	});
	
	function allchk() {
		var chknum = $("#list :checkbox").size(); //选项总个数
		var chk = 0;
		$("#list :checkbox").each(function() {
			if ($(this).prop("checked") == true) {
				chk++;
			}
		});
		if (chknum == chk) { //全选
			$("#all").prop("checked", true);
			} else { //不全选
			$("#all").prop("checked", false);
		}
	}
</script>