用 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宝典学习笔记
Feb 07 Javascript
JavaScript 动态添加表格行 使用模板、标记
Oct 24 Javascript
判断浏览器的javascript版本的代码
Sep 03 Javascript
jQuery 属性选择器element[herf*='value']使用示例
Oct 20 Javascript
JS验证邮件地址格式方法小结
Dec 01 Javascript
jQuery操作属性和样式详解
Apr 13 Javascript
微信小程序 教程之数据绑定
Oct 18 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
Vue中的混入的使用(vue mixins)
Jun 01 Javascript
Vue一个案例引发的递归组件的使用详解
Nov 15 Javascript
Vue项目总结之webpack常规打包优化方案
Jun 06 Javascript
js实现模拟购物商城案例
May 18 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/03/04 星际争霸
延长phpmyadmin登录时间的方法
2011/02/06 PHP
PHP中的strtr函数使用介绍(str_replace)
2011/10/20 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
php中strtotime函数性能分析
2016/11/20 PHP
php进程(线程)通信基础之System V共享内存简单实例分析
2019/11/09 PHP
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
JavaScript中的console.dir()函数介绍
2014/12/29 Javascript
jQuery中:nth-child选择器用法实例
2014/12/31 Javascript
举例简介AngularJS的内部语言环境
2015/06/17 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
jQuery操作iframe中js函数的方法小结
2016/07/06 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
import的本质解析
2017/10/30 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
python读取文件名并改名字的实例
2019/01/07 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
基于Python执行dos命令并获取输出的结果
2019/12/30 Python
Python新手学习raise用法
2020/06/03 Python
构造方法和其他方法的区别
2016/04/26 面试题
室内设计自我鉴定
2013/10/15 职场文书
幼儿园亲子活动方案
2014/01/29 职场文书
消防安全宣传标语
2014/06/07 职场文书
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
2014年幼儿园小班工作总结
2014/12/04 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书
Python Django获取URL中的数据详解
2021/11/01 Python
python 判断文件或文件夹是否存在
2022/03/18 Python
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技