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

小程序form表单验证 链接: https://pan.baidu.com/s/1XbxufnE4xVH3hJrzt1EXvg 提取码: 2yau 复制这段内容后打开百度网盘手机App,操作更方便哦 这个是验证表单封装后的js,我也是下载过来的 首先下载后放入utils里(当然自己写一个也没问题,我是直接下载,然后如果里面没有我想要的再添加) 在需要用的页面js里引入 import WxValidate fro... 阅读详情
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>

和单选框一样,许多新手在用 Javascript 验证表单(form)中多选框(checkbox)的值时,都会遇到问题,原因是 checkbox 和普通的文本框在获取值的时候有很大不同,本文介绍了一个较为通用的获取 checkbox 值的方法,希望对新手有用。


--------------------------------------------------------------
点此浏览示例文件
--------------------------------------------------------------


Javascript: <script type="text/javascript"> // 说明: 用 Javascript 验证表单(form)中多选框(checkbox)的值 // 作者: CodeBit.cn ( http://www.CodeBit.cn ) 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) == '')
{ ...... }

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

深入解析LCD DRM驱动框架中的KMS与GEM机制 本文深入解析了Linux内核中DRM(Direct Rendering Manager)驱动框架的核心机制,重点剖析了KMS(内核模式设置)与GEM(图形执行管理器)的工作原理。KMS作为显示系统的总指挥,负责原子化地控制CRTC、Encoder、Plane等硬件资源,确保画面同步更新,避免撕裂;GEM则作为显存大管家,通过DUMB和PRIME机制高效管理图形缓冲区的分配、共享与同步。文章结合RK3568平台实战,阐述了如何利用这些机制优化显示性能,并提供了调试技巧与常见问题解决方案。 阅读详情

相关推荐

Nginx/OpenResty目录穿越漏洞复现

Nginx/OpenResty目录穿越漏洞复现 漏洞背景: 2020年03月18日, 360CERT监测发现 openwall oss-security 邮件组披露了两枚漏洞。在特定配置下 nginx/openresty 存在 内存泄漏漏洞/目录穿越漏洞。 Nginx 是异步框架的网页服务器,也可以用作反向代理、负载平衡器和HTTP缓存。 OpenResty是一个基于nginx的Web平台,它对nginx增加LuaJIT引擎使其运行Lua脚本。 影响版本: nginx <= v1.17

小小猪的博客 1万+

如何在form表单上寻找到被选中的checkbox的值

在jQuery中存在着很多方式来寻找到自己想要获取的值,比如$(#id).val()或者$(.class).val()的方式来获取到相应的值,但是现在我有一个多选的CheckBox类型的值,我改通过什么方式来动态的获取自己选中的CheckBox的值呢?我寻找了很多种方法,也实验了很多次,终于找到了方法。下面的是我的HTML中的截图。 我要获取自己选中的CheckBox的值,可以通过以下两种方...

weixin_30883311的博客 1195

CATIA二次开发CAA:(一)开发环境搭建

CATIA+CAA+RADE+VS2012

ysm1987的博客 1万+

如何获取表单 复选框checkBox 的值

​​ <head> <meta charset="UTF-8"> <title>checkBox</title> <!--引入jquery文件--> <script type="text/javascript" src="jquery-1.8.3.min.js"></script>...

小小前端 6881

LoRa物联网实战:用新大陆模块打造智能LED呼吸灯(附完整代码解析)

本文详细介绍了如何利用新大陆LoRa模块实现工业级智能LED呼吸灯的设计与开发。通过256级PWM调制的呼吸灯效果,结合LoRa无线控制技术,实现设备状态的可视化反馈和多设备同步控制。文章包含完整的硬件选型、电路设计、算法优化和代码实现,特别适合物联网开发者和硬件工程师参考。

github5actions的博客 85

C++(Qt)软件调试---静态分析工具clang-tidy(18)

现在很多人在开发中完全忽略了编译器、IDE的警告提示,这怎么可能写出稳定的程序。 clang-tidy是一个由LLVM项目提供的开源工具,是一个静态分析工具,用于进行静态代码分析和代码质量改进。

mahuifa的博客 5080

js 关于checkbox相关操作

1.form表单提交一组checkbox $("#gift_is_rand input[type=checkbox]").click(function(){ var giftRandObj = $("#gift_is_rand input[type=checkbox]");    var len = giftRandObj.length;    var giftRand = '';

curtain的专栏 325

UniRx之基本语法格式

想要更好的去学习UniRx,我们最好是先理解UniRx 的语法格式。就像我们去学习英语或者汉语一样,理解了基本的语法规则后,再学其他的就信手拈来了。

TxNet 924

form表单提交option多选框,后台接收处理

有时候页面新增数据的时候一条一条添加很麻烦,操作很不友好,就需要点选很多次,这个时候多选框就很方便,传多个值到后台,后台处理再循环添加更方便一点,一般参数提交我们更多选用的是form表单提交的格式 form表单是根据name值确认给后台传的,因为一个对象,多选的name值一样它最终只会传一个值到后端,这就很烦了,除非不用form表单提交,而是把所有的参数都拼接起来使用传值,但是这样如果页面有改动...

明天和意外哪个先到,其实这不重要 7133

需求跟踪详解

需求跟踪是指在软件项目开发过程中,建立并维护需求与项目各阶段工作产物(如设计文档、代码模块、测试用例等)之间对应关系的过程。它不仅记录需求从提出到实现的完整路径,还能反映需求变更时对各阶段工作的影响范围,是连接用户期望与实际软件开发产出的桥梁。

跟佟格湾一起学习计算机知识吧~ 1422

【AI测试必学】DeepSeek API 快速入门:获取 API Key 与调用 API 步骤详解

DeepSeek API 使用与 OpenAI 兼容的格式,可以通过修改配置使用 OpenAI SDK。生成的 API Key 只会显示一次,请妥善保存。注册并登录账号,进入左侧导航栏的。创建 API Key。

blues_C的博客 1万+

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

       net     wps                // 说明: 用 Javascript 验证表单(form)中多选框(checkbox)的值 // 作者: CodeBit.cn ( http://www.CodeBit.cn )function myclick(obj) {alert(obj.value);}function getCheckboxValue

yanleigis的专栏 1396

基于STM32的太阳能充电宝设计_资料编号31

系统硬件包括主控 STM32F103C8T6、0.96 OLED 显示屏、蜂鸣器、电源自锁开关、温度传感器 DS18B20、继电器、5 V DC 升压模块 、TB4056、18650锂电池、9 V太阳能板、稳压降压 5 V三极管。电源供应:锂电池为系统供电,9 伏太阳能板经 5 伏降压稳压三极管降压为 5 伏后传送到 TP4056,TP4056 为锂电池供电,因锂电池电压 3.7 伏,通过 5 伏 DC 升压模块升压到 5 伏为整个系统提供 5 伏电压。

嵌入式阿齐Archie 1万+

vue 给form表单赋值_vue获取form表单的值示例

vue获取form表单的值示例这里使用的是Element-ui组件html:JS:var phone = this.phone;var password = this.password;var that = this;var phone = that .phone;var password = that .password;this.$axios({method:'post',url:'api/u...

weixin_39788986的博客 1万+

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

elementui校验Dialog弹框中form表单checkbox可选择项

dialog弹框中碰到form表单有el-checkbox的可选择项,在save保存表单时如果可选择项被选择,则需要对所选项中的字段进行校验,如果未选择则不需要校验。并且需在处理可选择项中数据时符合逻辑。

weixin_42961412的博客 2610

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

用 Javascript 验证表单(form)中的单选(radio)值

<!--google_ad_client = "pub-4490194096475053";/* 内容页,300x250,第一屏 */google_ad_slot = "3685991503";google_ad_width = 300;google_ad_height = 250;// --> 在用 Javascript 验证表单(form)中的单选框(r

管子(zero)的杂乱空间 1607

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

Html中Form表单的总结

HTML表单是用户与网页交互的核心工具,通过<form>标签创建,包含输入控件、提交按钮等元素。常用输入类型包括文本、密码、邮箱、单选/复选框等,通过action和method属性定义数据提交目标及方式。关键元素有<label>(增强可访问性)、<fieldset>(分组)和<button>(灵活按钮)。表单支持HTML5验证(如required)和自定义验证,数据可通过GET(可见)或POST(安全)提交。最佳实践包括:优化可访问性、用户体验设计、服务器端验

likuoelie的博客 877

HTML5系例-form表单

1.FORM表单 <form action="url" method="POST" novalidate> <label for="title">标题</label> <input type="text" name="title" id="title"> </form> 属性 说明 action 后台...

前端蜗牛君 728
上一篇: 批量替换 MySQL 指定字段中的字符串
下一篇: 用 CSS 实现图片替换文字(Image replacement)
piperzero
博客等级 码龄21年 1377粉丝 504原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值