用 Javascript 验证表单(form)中多选框(checkbox)值


Posted in Javascript onSeptember 08, 2009

本文介绍了一个较为通用的获取 checkbox 值的方法,希望对新手有用。

<script type="text/javascript"> 
// 说明: 用 Javascript 验证表单(form)中多选框(checkbox)的值 
// 作者: CodeBit 
function getCheckboxValue(checkbox) 
{ 
if (!checkbox.length && checkbox.type.toLowerCase() == 'checkbox') 
{ return (checkbox.checked)?checkbox.value:''; } 
if (checkbox[0].tagName.toLowerCase() != 'input' || 
checkbox[0].type.toLowerCase() != 'checkbox') 
{ return ''; } 
var val = []; 
var len = checkbox.length; 
for(i=0; i<len; i++) 
{ 
if (checkbox[i].checked) 
{ 
val[val.length] = checkbox[i].value; 
} 
} 
return (val.length)?val:''; 
} 
</script>

和 radio 一样,都是 name 相同,值有多个,在获取 checkbox 值的时候,我们不能按照普通文本框 .value 的方式,而是要判断哪个被选中了。

当一组 checkbox 有多个选项时,我们可以通过循环,以 checkbox[i] 的方式判断某个选项是否被选中来返回值,但是当一组 checkbox 只有一个选项时,获取值的方式又有变化,代码中以 (checkbox.checked)?checkbox.value:''; 的方式直接判断是否选中,然后返回对应值。

上面的代码传入的参数是 checkbox 对象,如:

var checkboxTest = document.forms['testForm'].elements['checkboxTest']; 
if (getCheckboxValue(checkboxTest) == '') 
{ ...... }

根据判断结果执行你想要的操作。
Javascript 相关文章推荐
Open and Print a Word Document
Jun 15 Javascript
Web前端设计模式  制作漂亮的弹出层
Oct 29 Javascript
js实现addClass,removeClass,hasClass的函数代码
Jul 13 Javascript
jQuery中用dom操作替代正则表达式
Dec 29 Javascript
Jquery promise实现一张一张加载图片
Nov 13 Javascript
微信小程序 条件渲染详解
Oct 09 Javascript
Node.js操作redis实现添加查询功能
May 25 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 Javascript
web前端vue filter 过滤器
Jan 12 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 Javascript
vue使用节流函数的踩坑实例指南
May 20 Vue.js
Javascript String.replace的妙用
Sep 08 #Javascript
Javascript 检测、添加、移除样式(className)函数代码
Sep 08 #Javascript
javascript 流畅动画实现原理
Sep 08 #Javascript
javascript 定义初始化数组函数
Sep 07 #Javascript
javascript十个最常用的自定义函数(中文版)
Sep 07 #Javascript
javascript 获取select下拉列表值的代码
Sep 07 #Javascript
Javascript中的var_dump函数实现代码
Sep 07 #Javascript
You might like
社区(php&amp;&amp;mysql)二
2006/10/09 PHP
PHP通过header实现文本文件下载的代码
2010/08/08 PHP
php利用smtp类实现电子邮件发送
2015/10/30 PHP
thinkphp项目如何自定义微信分享描述内容
2017/02/20 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
Laravel框架使用monolog_mysql实现将系统日志信息保存到mysql数据库的方法
2018/08/16 PHP
jquery 查找新建元素代码
2010/07/06 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
js将json格式内容转换成对象的方法
2013/11/01 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
2016/06/12 Javascript
js严格模式总结(分享)
2016/08/22 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
2017/09/20 jQuery
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
以视频爬取实例讲解Python爬虫神器Beautiful Soup用法
2016/01/20 Python
python保存网页图片到本地的方法
2018/07/24 Python
Python二叉树的遍历操作示例【前序遍历,中序遍历,后序遍历,层序遍历】
2018/12/24 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
基于python爬取梨视频实现过程解析
2020/11/09 Python
Tommy Hilfiger美国官网:美国高端休闲领导品牌
2019/01/14 全球购物
多媒体专业自我鉴定
2014/02/28 职场文书
最经典的商业地产项目广告词
2014/03/13 职场文书
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
工作态度怎么写
2015/06/25 职场文书
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android
MySQL系列之六 用户与授权
2021/07/02 MySQL