`
java-mans
  • 浏览: 11407666 次
文章分类
社区版块
存档分类
最新评论

JQuery操作复选按钮的小例子

 
阅读更多


有时遇到一个问题,需要获取页面选中checkbox的值传递给后台进行一系列处理。而我们写的最传统的JS获取选中的值如下:

function getids(){
				var obj = document.getElementsByTagName("input");
				var menuIds="";
				for ( var i = 0; i < obj.length; i++) {
					if (obj[i].type == "checkbox" && obj[i].checked == true) {
						menuIds+= obj[i].value + ",";
					}
				}
				if(menuIds.indexOf(",")!=-1){
					menuIds=menuIds.substring(0, menuIds.length-1);//去掉结尾的,
				}
				return menuIds;
			}

如果使用jquery优化后的代码:

function getids(){
				var obj = $("input[type=checkbox]:checked"); 
				var menuIds="";
				$.each(obj,function(i){
					menuIds+= obj[i].value + ",";
				});
				if(menuIds.indexOf(",")!=-1){
					menuIds=menuIds.slice(0,-1);//去掉结尾的,
				}
				return menuIds;
			}
精简后我们的代码如下:

function getids(){
				var menuIds="";
				$("input[type=checkbox]:checked").each(function(){
					menuIds+= this.value + ",";
				});
				if(menuIds.indexOf(",")!=-1){
					menuIds=menuIds.slice(0,-1);//去掉结尾的,
				}
				return menuIds;
			}



下面是一位朋友的关于JQuery获取按钮的详细说明。可以参考学习。

http://blog.csdn.net/zlb824/article/details/7406637

单选按钮以及复选按钮在开发过程中会经常用到,下面我就来通过JQuery操作单选按钮和复选按钮:

单选按钮:

通过JQuery获取单选按钮对象我们总共有三种途径:

①ID:$("#radioId")

②NAME:$(":input[name='radioName']")

③TYPE:$("input[type=radio]"),可能在有的资料上面写的是:$(""input[@type=radio]""),这个的话跟你的JQuery版本有关系,如果是老版本的话就用后者,新版本就用前者,如果不知道自己的版本到底适合用哪一个的话就挨个试,反正一次尝试就能搞定,而且还能学到知识,何乐而不为呢!

我们都知道,在一组单选按钮当中只能使一个生效,要实现这种效果,很多人可能会认为把ID改为相同的就可,其实,你去尝试一下就会知道,在一组单选按钮中仍然可以选用多个。因为,实现此效果的关键属性不是ID,而是NAME。

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics