用 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 相关文章推荐
js 页面执行时间计算代码
Mar 04 Javascript
Js 本页面传值实现代码
May 17 Javascript
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
Jquery插件 easyUI属性汇总
Jan 19 Javascript
javascipt:filter过滤介绍及使用
Sep 10 Javascript
JavaScript计时器示例分析
Feb 05 Javascript
jQuery的extend方法【三种】
Dec 14 Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
Aug 19 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
Jul 07 Javascript
vue+animation实现翻页动画
Jun 29 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将数组存储为文本文件方法汇总
2015/10/28 PHP
php打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
thinkphp 抓取网站的内容并且保存到本地的实例详解
2017/08/25 PHP
BootStrap入门教程(一)之可视化布局
2016/09/19 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
[01:33:59]真人秀《加油 DOTA》 第六期
2014/09/09 DOTA
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
python3 property装饰器实现原理与用法示例
2019/05/15 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
keras中的History对象用法
2020/06/19 Python
python如何写try语句
2020/07/14 Python
Python如何重新加载模块
2020/07/29 Python
python的launcher用法知识点总结
2020/08/07 Python
Python grpc超时机制代码示例
2020/09/14 Python
Python类成员继承重写的实现
2020/09/16 Python
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
上海奥佳笔试题面试题
2016/11/16 面试题
写自荐信有哪些不宜?
2013/10/17 职场文书
市场营销专业个人求职信范文
2013/12/14 职场文书
会计专业自我鉴定范文
2013/12/29 职场文书
结婚典礼证婚词
2014/01/08 职场文书
五好党支部事迹材料
2014/02/06 职场文书
我的长生果教学反思
2014/04/28 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
党支部创先争优承诺书
2014/08/30 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
会计岗位职责
2015/02/03 职场文书
工作态度检讨书范文
2015/05/06 职场文书
九年级化学教学反思
2016/02/22 职场文书
幼儿园教师教学反思
2016/03/02 职场文书
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP
详解Laravel框架的依赖注入功能
2021/05/27 PHP