用 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 相关文章推荐
jQuery 浮动导航菜单适合购物商品类型的网站
Sep 09 Javascript
学习JavaScript设计模式之中介者模式
Jan 14 Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 Javascript
AngularJS实现一次监听多个值发生的变化
Aug 31 Javascript
探索Javascript中this的奥秘
Dec 11 Javascript
canvas绘图不清晰的解决方案
Feb 28 Javascript
JS对象创建的几种方式整理
Feb 28 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
May 11 Javascript
解决easyui日期时间框ie的兼容的问题
Mar 01 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
Sep 26 Javascript
如何实现一个webpack模块解析器
Oct 24 Javascript
JS面试题中深拷贝的实现讲解
May 07 Javascript
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邮件专题
2006/10/09 PHP
php基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
php构造函数与析构函数
2016/04/23 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
PHP加密解密类实例代码
2016/07/20 PHP
使用PHP开发留言板功能
2019/11/19 PHP
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
2007/03/06 Javascript
Javascript操作cookie的函数代码
2012/10/03 Javascript
JS 跳转页面延迟2种方法
2013/03/29 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
在Windows8上的搭建Python和Django环境
2014/07/03 Python
Python命令启动Web服务器实例详解
2017/02/23 Python
Java分治归并排序算法实例详解
2017/12/12 Python
Python日期时间对象转换为字符串的实例
2018/06/22 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
意大利运动服减价商店:ScontoSport
2020/03/10 全球购物
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
技校生自我鉴定
2013/12/08 职场文书
网上快餐厅创业计划书
2014/02/01 职场文书
总经理秘书岗位职责
2014/03/17 职场文书
骨干教师考核方案
2014/05/09 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers