用 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函数库-集合框架
Apr 27 Javascript
推荐10个超棒的jQuery工具提示插件
Oct 11 Javascript
关于js中for in的缺陷浅析
Dec 02 Javascript
jquery中EasyUI实现异步树
Mar 01 Javascript
JS实现的通用表单验证插件完整实例
Aug 20 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
Apr 30 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
May 27 Javascript
JS利用cookies设置每隔24小时弹出框
Apr 20 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
Dec 04 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
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
PHP 缓存实现代码及详细注释
2010/05/16 PHP
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
js修改table中Td的值(定义td的双击事件)
2013/01/10 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
js replace 与replaceall实例用法详解
2013/08/03 Javascript
jQuery回调函数的定义及用法实例
2014/12/23 Javascript
jquery实现的树形目录实例
2015/06/26 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
Javascript中引用类型传递的知识点小结
2017/03/06 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
解决iView中时间控件选择的时间总是少一天的问题
2018/03/15 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
2018/09/03 Javascript
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
TensorFLow用Saver保存和恢复变量
2018/03/10 Python
python logging重复记录日志问题的解决方法
2018/07/12 Python
python实现简单的单变量线性回归方法
2018/11/08 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
python实现接口并发测试脚本
2019/06/25 Python
详解numpy矩阵的创建与数据类型
2019/10/18 Python
Python通过socketserver处理多个链接
2020/03/18 Python
华为python面试题
2016/05/03 面试题
致跳远、跳高运动员广播稿
2014/01/09 职场文书
2015年财政局工作总结
2015/05/21 职场文书
趣味运动会加油词
2015/07/18 职场文书
python实现Thrift服务端的方法
2021/04/20 Python
如何利用Matlab制作一款真正的拼图小游戏
2021/05/11 Python