关闭

JQuery操作复选按钮的小例子

1232人阅读 评论(3) 收藏 举报


有时遇到一个问题,需要获取页面选中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。

2
0
查看评论

(亲测) 带有单选按钮和复选按钮 的dialog+详细代码+注释

package example.com.myapplication; import android.app.Activity; import android.app.AlertDialog; import android.app.Dialog; import android.content.Dia...
  • ITzhongzi
  • ITzhongzi
  • 2016-08-22 10:03
  • 217

JQuery小案例

1.
  • luohuaxinyue
  • luohuaxinyue
  • 2016-03-18 12:32
  • 1189

一个jquery的小例子

购买                                          &...
  • taomanman
  • taomanman
  • 2014-06-13 09:38
  • 1223

JQuery操作单选按钮以及复选按钮

单选按钮以及复选按钮在开发过程中会经常用到,下面我就来通过JQuery操作单选按钮和复选按钮: 单选按钮: 通过JQuery获取单选按钮对象我们总共有三种途径: ①ID:$("#radioId") ②NAME:$(":input[name='radioN...
  • zlb824
  • zlb824
  • 2012-03-29 13:29
  • 1567

微信小程序--单选复选按钮组的实现

本文主要介绍微信小程序单选按钮很多选按钮的实现方式。众所周知,小程序目前无法绑定DOM截点,实现的原理就是通过bindtap点击的事件方法获取data-id进行循环遍历取反而实现该效果。 (一)单选按钮组模型图如下: index.jsPage({ data: { parameter...
  • qq_38209578
  • qq_38209578
  • 2017-12-15 11:22
  • 1725

CSS3美化单选按钮和复选按钮

1.html CSS3美化单选按钮和复选按钮代码 .demo{width:360px;margin:50px auto 10px auto;padding:10px;} .demo img{width:90%} .demo h3{font-size:1.5em;line-heigh...
  • gao_xu_520
  • gao_xu_520
  • 2017-07-13 09:39
  • 309

Jquery操作下拉列表和复选框,自定义下拉

达人科技 2017-01-08 17:07 后半部分还有自定义下拉列表和开灯关灯的效果,可以进来来看一下 哦 如果网页有下拉列表和复选框,看一下Jquery怎么来操作他们,主要怎么来选取他们的数据,怎么设置某一项选中 先来看个下拉列表 张店 淄川 博山 桓台 上面是一个非常简单的下拉列表...
  • u011277123
  • u011277123
  • 2017-01-10 09:07
  • 749

全选/取消复选按钮操作

1.全选/取消复选按钮操作 DOCTYPE Html> function selectAll(checkbox) { (′input[type=checkbox]′).prop...
  • qq904620272
  • qq904620272
  • 2016-08-16 18:38
  • 148

jQuery实现多选框的全选按钮自动选中与消失

页面中实现全选,反选,一组复选框选中时全选按钮自动选中,一组中有一个未选中时全选按钮取消 $('#checkAll').click(function(){ if(this.checked) { $("input...
  • qq_36940798
  • qq_36940798
  • 2017-09-12 11:01
  • 501

50个实用的jquery案例

1. 如何创建嵌套的过滤器: //允许你减少集合中的匹配元素的过滤器,   //只剩下那些与给定的选择器匹配的部分。在这种情况下,   //查询删除了任何没(:not)有(:has)   //包含class为“selected”(.selected)的子...
  • u013415353
  • u013415353
  • 2016-02-25 10:45
  • 284
    About Me
    扫描关注最代码微信公众号。

    自由、简单、快乐
    学习网站:java源代码学习
    个人资料
    • 访问:4449538次
    • 积分:39498
    • 等级:
    • 排名:第113名
    • 原创:665篇
    • 转载:89篇
    • 译文:1篇
    • 评论:1296条
    友情链接
    博客专栏