用 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
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
PHP 二维数组根据某个字段排序的具体实现
2023-11-20 05:21:13
python调用支付宝支付接口流程
2022-01-15 14:04:45
![](https://img.aspxhome.com/file/2023/5/125195_0s.png)
在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
![](https://img.aspxhome.com/file/2023/0/134540_0s.png)
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
![](https://img.aspxhome.com/file/2023/9/109399_0s.png)
MySQL中datetime和timestamp的区别及使用详解
2024-01-19 05:58:28
怎么样才能抓住用户?
2008-10-20 12:10:00
Python3.6安装及引入Requests库的实现方法
2022-06-12 16:55:46
![](https://img.aspxhome.com/file/2023/4/120644_0s.jpg)
效控制C#中label输出文字的长度,自动换行
2023-07-22 04:02:49
python 获取网页编码方式实现代码
2023-07-21 08:15:14
vue实现移动端图片裁剪上传功能
2024-05-10 14:15:04
![](https://img.aspxhome.com/file/2023/8/126538_0s.jpg)
2021年最新版Python安装及使用教学
2022-09-18 08:24:00
![](https://img.aspxhome.com/file/2023/9/135359_0s.png)
tensorflow 1.X迁移至tensorflow2 的代码写法
2023-07-19 08:30:54
Java连接各种数据库的方法
2024-01-28 10:56:26