用 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获取当前select 元素值的代码
Apr 19 Javascript
基于jquery实现的文字淡入淡出效果
Nov 14 Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 Javascript
javascript与css3动画结合使用小结
Mar 11 Javascript
js精准的倒计时函数分享
Jun 29 Javascript
jquery点击展示与隐藏更多内容
Dec 03 Javascript
基于daterangepicker日历插件使用参数注意的问题
Aug 10 Javascript
ES6中Array.copyWithin()函数的用法实例详解
Sep 16 Javascript
简单介绍react redux的中间件的使用
Apr 06 Javascript
vue-cli3.0使用及部分配置详解
Aug 29 Javascript
vue使用Font Awesome的方法步骤
Feb 26 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
Sep 06 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模拟服务器实现autoindex效果的方法
2015/03/10 PHP
Laravel 5框架学习之Eloquent 关系
2015/04/09 PHP
php微信开发之百度天气预报
2016/11/18 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
JavaScript delete 属性的使用
2009/10/08 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
2011/12/08 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
2016/07/14 Javascript
js防阻塞加载的实现方法
2016/09/09 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
使用JS 插件qrcode.js生成二维码功能
2017/02/20 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
详解Python中的动态属性和特性
2018/04/07 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
简约控的天堂:The Undone
2016/12/21 全球购物
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
意大利制造的西装、衬衫和针对男士量身定制的服装:Lanieri
2018/04/08 全球购物
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
Miller Harris官网:英国小众香水品牌
2020/09/24 全球购物
区优秀教师事迹材料
2014/02/10 职场文书
个人自我鉴定总结
2014/03/25 职场文书
人事专员岗位职责说明书
2014/07/30 职场文书
创先争优活动承诺书
2014/08/30 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
教师批评与自我批评发言稿
2014/10/15 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
公司慰问信范文
2015/03/23 职场文书
2016年寒假生活小结
2015/10/10 职场文书
Python pandas求方差和标准差的方法实例
2021/08/04 Python
Pandas 数据编码的十种方法
2022/04/20 Python
Win10服务主机占用内存怎么办?Win10服务主机进程占用大量内存解决方法
2022/09/23 数码科技