用 Javascript 验证表单(form)中多选框(checkbox)值

时间:2024-04-10 10:39:14 

本文介绍了一个较为通用的获取 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) == '')
{ ...... }


根据判断结果执行你想要的操作。

标签:form,多选框,checkbox
0
投稿

猜你喜欢

  • PHP 二维数组根据某个字段排序的具体实现

    2023-11-20 05:21:13
  • python调用支付宝支付接口流程

    2022-01-15 14:04:45
  • 在ASP中使用SQL语句之1:SELECT 语句

    2007-08-11 12:18:00
  • 对django layer弹窗组件的使用详解

    2021-09-08 00:09:38
  • 详解python 模拟豆瓣登录(豆瓣6.0)

    2022-06-29 22:20:00
  • Jsp生成页面验证码的方法[附代码]

    2023-06-25 07:46:42
  • Vue+Element+Springboot图片上传的实现示例

    2024-06-07 15:19:39
  • Silverlight与Flash的技术比较

    2009-04-19 18:45:00
  • XSL简明教程

    2013-08-08 00:19:06
  • python操作mongodb根据_id查询数据的实现方法

    2023-04-04 23:12:28
  • Pyspark读取parquet数据过程解析

    2022-01-21 13:33:38
  • MySQL中datetime和timestamp的区别及使用详解

    2024-01-19 05:58:28
  • 怎么样才能抓住用户?

    2008-10-20 12:10:00
  • Python3.6安装及引入Requests库的实现方法

    2022-06-12 16:55:46
  • 效控制C#中label输出文字的长度,自动换行

    2023-07-22 04:02:49
  • python 获取网页编码方式实现代码

    2023-07-21 08:15:14
  • vue实现移动端图片裁剪上传功能

    2024-05-10 14:15:04
  • 2021年最新版Python安装及使用教学

    2022-09-18 08:24:00
  • tensorflow 1.X迁移至tensorflow2 的代码写法

    2023-07-19 08:30:54
  • Java连接各种数据库的方法

    2024-01-28 10:56:26
  • asp之家 网络编程 m.aspxhome.com