有时遇到一个问题,需要获取页面选中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。
分享到:
相关推荐
jQuery 修改复选框 单选按钮 傻瓜代码 直接可用
jquery 复选框组件jquery 复选框组件jquery 复选框组件jquery 复选框组件jquery 复选框组件
jquery实现 复选框 选中和不选中 美化复选框
jquery动态复选框取值 jquery动态复选框取值 jquery动态复选框取值 jquery动态复选框取值 jquery动态复选框取值 jquery动态复选框取值
jquery复选框选中按钮
jQuery实现复选框checkbox的全选与反选功能,不用多介绍了吧,以往都是基于纯js的实现比较多,这个是引入了jquery,或许更能满足现在的前端设计吧。
jQuery复选框美化、单选按钮美化,个人感觉挺漂亮
一款非常好看的jQuery单选按钮和复选按钮美化效果,精装单选框复选框美化代码。
实现了对网页中最常见的多复选框的选定,另外笔者对此进行了改善,使全选与单选的复选框的选中效果更加动态。
一个js的方法,调用该js可实现下拉复选框。 /**//** * Creat date 2011-11-10 * Creat by zhuoyueping *支持input表单的下拉复选框。 *使用方法: * (1)调用js函数:setSelectBox(textItem, myArray); *...
jquery版本的复选框全选和不选,简单而且好用,我是在项目中摘要出来的小示例。
jQuery树形复选框插件,jQuery树形复选框插件,jQuery树形复选框插件,jQuery树形复选框插件
带有演示数据,jquery无限极复选框下拉树,父级全选,子级单选都可以。
web前端插件+下拉多选复选框,可用于后台多选数据,前端也可以使用,插件可以二开也可以
单选按钮以及复选按钮的使用情况还是蛮多的,接下来为大家介绍下通过JQuery操作单选按钮和复选按钮,希望对大家有所帮助
《锋利的jquery》利用jquery实现复选框的全选和反选
jQuery滑动复选框操作菜单
利用Jquery 做出的效果是:复选框选中之后 按钮才能点击
jquery 复选框 全选,全不选,在同一个按钮实现,格式是html
jquery滑动复选框菜单