用 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 相关文章推荐
JavaScript的Function详细
Nov 14 Javascript
jQuery学习笔记之Helloworld
Dec 22 Javascript
js滚动条回到顶部的代码
Dec 06 Javascript
javascript替换已有元素replaceChild()使用介绍
Apr 03 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 Javascript
基于jQuery+JSON的省市二三级联动效果
Jun 05 Javascript
jquery合并表格中相同文本的相邻单元格
Jul 17 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 Javascript
ES6学习教程之对象的扩展详解
May 02 Javascript
vue component组件使用方法详解
Jul 14 Javascript
微信小程序实现人脸识别登陆的示例代码
Apr 02 Javascript
通过实例了解JS 连续赋值
Sep 24 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
2020年4月新番动漫目录 官方宣布4月播出的作品一览
2020/03/08 日漫
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
php使用wordwrap格式化文本段落的方法
2015/03/17 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
Javascript 跨域访问解决方案
2009/02/14 Javascript
chrome原生方法之数组
2011/11/30 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
2013/12/30 Javascript
AngularJS模块管理问题的非常规处理方法
2015/04/29 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
JavaScript实现一个空中避难的小游戏
2017/06/06 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
实例讲解v-if和v-show的区别
2019/01/31 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
原生js+canvas实现下雪效果
2020/08/02 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
2020/08/31 Javascript
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
Python使用ntplib库同步校准当地时间的方法
2016/07/02 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
pandas 层次化索引的实现方法
2019/07/06 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
Python3的socket使用方法详解
2020/02/18 Python
python 装饰器重要在哪
2021/02/14 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
CSS3,线性渐变(linear-gradient)的使用总结
2017/01/09 HTML / CSS
美国快时尚彩妆品牌:Winky Lux(透明花瓣润唇膏)
2018/11/06 全球购物
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
教师实习的自我鉴定
2013/10/26 职场文书
标准导师推荐信(医学类)
2013/10/28 职场文书
小学学校评估方案
2014/06/08 职场文书
工作收入证明模板
2014/10/10 职场文书
超市采购员岗位职责
2015/04/07 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
环保建议书作文300字
2015/09/14 职场文书
如何避免mysql启动时错误及sock文件作用分析
2022/01/22 MySQL