用 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 流畅动画实现原理
Sep 08 Javascript
Js 时间间隔计算的函数(间隔天数)
Nov 15 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
Nov 01 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
JavaScript移除数组内重复元素的方法
Mar 18 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
May 02 Javascript
Vue ElementUI之Form表单验证遇到的问题
Aug 21 Javascript
JavaScript多态与封装实例分析
Jul 27 Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 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
?生?D片??C字串
2006/12/06 PHP
一贴学会PHP 新手入门教程
2009/08/03 PHP
用php解析html的实现代码
2011/08/08 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
php实现推荐功能的简单实例
2019/09/29 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
javascript delete 使用示例代码
2010/03/29 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
javascript父、子页面交互技巧总结
2014/08/08 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
vue如何实现observer和watcher源码解析
2017/03/09 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
python操作xml文件详细介绍
2014/06/09 Python
Python中logging模块的用法实例
2014/09/29 Python
Python装饰器的函数式编程详解
2015/02/27 Python
python处理csv数据的方法
2015/03/11 Python
python实现的jpg格式图片修复代码
2015/04/21 Python
python之Character string(实例讲解)
2017/09/25 Python
pandas 数据归一化以及行删除例程的方法
2018/11/10 Python
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
创业计划书怎样才能打动风投
2014/01/01 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书
redis配置文件中常用配置详解
2021/04/14 Redis
python编程项目中线上问题排查与解决
2021/11/01 Python
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技