用 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操作ajax返回的json的注意问题!
Feb 23 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
Mar 24 Javascript
JQuery EasyUI 对话框的使用方法
Oct 24 Javascript
用jquery等比例控制图片宽高的具体实现
Jan 28 Javascript
js的touch事件的实际引用
Oct 13 Javascript
js鼠标悬浮出现遮罩层的方法
Jan 28 Javascript
不用一句js代码初始化组件
Jan 27 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
Nov 17 Javascript
JS实现的字符串数组去重功能小结
Jun 17 Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 Javascript
详细分析vue表单数据的绑定
Jul 20 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 获取一个月第一天与最后一天的代码
2010/05/16 PHP
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
php日历制作代码分享
2014/01/20 PHP
PHP计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
2010/11/30 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
javascript上传图片前预览图片兼容大多数浏览器
2013/10/25 Javascript
javascript多行字符串的简单实现方式
2015/05/04 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
2018/01/08 Javascript
vue.js template模板的使用(仿饿了么布局)
2018/08/13 Javascript
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
2020/04/08 Javascript
element中Steps步骤条和Tabs标签页关联的解决
2020/12/08 Javascript
[06:36]吞吞映像top1
2014/06/20 DOTA
Python获取SQLite查询结果表列名的方法
2017/06/21 Python
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
Django实现学员管理系统
2019/02/26 Python
python的常见矩阵运算(小结)
2019/08/07 Python
python爬虫之爬取百度音乐的实现方法
2019/08/24 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
瑞士国际航空官网:SWISS
2016/07/21 全球购物
荷兰皇家航空公司官方网站:KLM Royal Dutch Airlines
2017/12/07 全球购物
九月份红领巾广播稿
2014/01/22 职场文书
餐饮采购员岗位职责
2014/03/15 职场文书
文明演讲稿范文
2014/05/12 职场文书
加入学生会自荐书
2015/03/05 职场文书
中国文明网2015年“向国旗敬礼”活动网上签名寄语
2015/09/24 职场文书
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS