最新消息:

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

JQuery应用 杨红伟 11800浏览 0评论

一:描述

在购物车时,我们常常用到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>

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址