用 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 复制数组实现代码
Nov 26 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
Mar 26 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
Javascript基础教程之函数对象和属性
Jan 18 Javascript
JavaScript中逗号运算符介绍及使用示例
Mar 13 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
Dec 08 Javascript
JS实现的DIV块来回滚动效果示例
Feb 07 Javascript
vue.js之vue-cli脚手架的搭建详解
May 05 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
Dec 05 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 Javascript
ajax jquery实现页面某一个div的刷新效果
Mar 04 jQuery
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极大的增强功能和性能
2006/10/09 PHP
php自动给文章加关键词链接的函数代码
2012/11/29 PHP
关于尾递归的使用详解
2013/05/02 PHP
PHP curl实现抓取302跳转后页面的示例
2014/07/04 PHP
PHP中文编码小技巧
2014/12/25 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
PHP框架自动加载类文件原理详解
2017/06/06 PHP
laravel 判断查询数据库返回值的例子
2019/10/11 PHP
js 颜色选择器(兼容firefox)
2009/03/05 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
js创建对象的方法汇总
2016/01/07 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
2016/09/03 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
Angular封装搜索框组件操作示例
2019/04/25 Javascript
重命名批处理python脚本
2013/04/05 Python
Python爬虫框架Scrapy常用命令总结
2018/07/26 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
Python日志:自定义输出字段 json格式输出方式
2020/04/27 Python
Python通过文本和图片生成词云图
2020/05/21 Python
详解如何通过H5(浏览器/WebView/其他)唤起本地app
2017/12/11 HTML / CSS
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
英国家喻户晓的家居商店:The Range
2019/03/25 全球购物
struct和class的区别
2015/11/20 面试题
外贸英语毕业生自荐信
2013/11/14 职场文书
英语教师岗位职责
2014/03/16 职场文书
中国梦团日活动总结
2014/07/07 职场文书
2014统计局民主生活会对照检查材料思想汇报
2014/10/02 职场文书
考研英语复习计划
2015/01/19 职场文书
警告通知
2015/04/25 职场文书
《打电话》教学反思
2016/02/22 职场文书
三年级作文之趣事作文
2019/11/04 职场文书
Python 使用 Frame tkraise() 方法在 Tkinter 应用程序中的Frame之间切换
2022/04/24 Python