用 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 for循环设法提高性能
Feb 24 Javascript
juqery 学习之四 筛选过滤
Nov 30 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
javascript面向对象特性代码实例
Jun 12 Javascript
Javascript 实现图片无缝滚动
Dec 19 Javascript
jquery操作select元素和option的实例代码
Feb 03 Javascript
AngularJS 中的指令实践开发指南(一)
Mar 20 Javascript
jQuery插件实现图片轮播特效
Jun 16 Javascript
JS中使用 after 伪类清除浮动实例
Mar 01 Javascript
史上最全JavaScript常用的简写技巧(推荐)
Aug 17 Javascript
jqgrid实现简单的单行编辑功能
Sep 30 Javascript
layui的table中显示图片方法
Aug 17 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
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2011/01/27 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
微信公众号判断用户是否已关注php代码解析
2016/06/24 PHP
php中照片旋转 (orientation) 问题的正确处理
2017/02/16 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
jquery中实现标签切换效果的代码
2011/03/01 Javascript
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
JS模板实现方法
2013/04/03 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
2015/01/13 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
jQuery中使用animate自定义动画的方法
2016/05/29 Javascript
javascript淘宝主图放大镜功能
2016/10/20 Javascript
jQuery生成假加载动画效果
2016/12/01 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
js Date()日期函数浏览器兼容问题解决方法
2017/09/12 Javascript
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
浅谈微信页面入口文件被缓存解决方案
2018/09/29 Javascript
浅谈Vue组件单元测试究竟测试什么
2020/02/05 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
2020/06/16 Javascript
vue实现登录功能
2020/12/31 Vue.js
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
[34:08]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS EG
2018/03/30 DOTA
python二叉树遍历的实现方法
2013/11/21 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
Pycharm打开已有项目配置python环境的方法
2020/07/03 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
python drf各类组件的用法和作用
2021/01/12 Python
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
linux面试题参考答案(1)
2016/01/22 面试题
信访维稳承诺书
2015/05/04 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书