用 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 相关文章推荐
List all the Databases on a SQL Server
Jun 21 Javascript
js cookies实现简单统计访问次数
Nov 24 Javascript
js判断背景图片是否加载成功使用img的width实现
May 29 Javascript
深入理解JSON数据源格式
Jan 10 Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 Javascript
vue如何使用 Slot 分发内容实例详解
Sep 05 Javascript
javascript 产生随机数的几种方法总结
Sep 26 Javascript
使用Dropzone.js上传的示例代码
Oct 10 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
Vue-CLI 项目在pycharm中配置方法
Aug 30 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
Sep 06 Javascript
详解JavaScript原型与原型链
Nov 16 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
真正的ZIP文件操作类(php)
2007/07/21 PHP
PHP使用CURL模拟登录的方法
2015/07/08 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
jquery索引在使用中的一些困惑
2013/10/24 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
JS及PHP代码编写八大排序算法
2016/07/12 Javascript
Vue.Draggable实现拖拽效果
2020/07/29 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
2017/09/01 Javascript
Vue.js中的computed工作原理
2018/03/22 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
vue中监听路由参数的变化及方法
2019/12/06 Javascript
python爬虫常用的模块分析
2014/08/29 Python
仅利用30行Python代码来展示X算法
2015/04/01 Python
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
实例Python处理XML文件的方法
2015/08/31 Python
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
python遍历序列enumerate函数浅析
2017/10/17 Python
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
详解supervisor使用教程
2017/11/21 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
详解python持久化文件读写
2019/04/06 Python
django框架实现模板中获取request 的各种信息示例
2019/07/01 Python
python支持多继承吗
2020/06/19 Python
Python实现自动签到脚本功能
2020/08/20 Python
装潢设计实习自我鉴定
2013/09/19 职场文书
设计毕业生简历中的自我评价
2013/10/01 职场文书
财务出纳岗位职责
2015/03/31 职场文书
电力工程合作意向书
2015/05/11 职场文书
导游词之临安白水涧
2019/11/05 职场文书
Pandas数据类型之category的用法
2021/06/28 Python
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers