原生JS实现表单checkbook获取已选择的值

从一个表单checkbox获取到已选中的数据值：


代码如下:

<input type="checkbox" name="cb" value="1" />aa
<input type="checkbox" name="cb" value="2" />bb
<input type="checkbox" name="cb" value="3" />cc
<input type="checkbox" name="cb" value="4" />dd
<br/>
<input type="button" value="提交" onclick="checkedValues()" />

采用原生JS写法：


代码如下:

function checkedValues(){
var arr=new Array();
var checkbox=document.getElementByName('cb');
for(var i=0;i<checkbox.length();i++){
if(checkbox[i].checked==true){
arr.push(checkbox[i].value);
alert(checkbox[i].value);
}
}
}

赞 (0)

相关推荐

  • 原生JS实现表单checkbook获取已选择的值

    从一个表单checkbox获取到已选中的数据值: 复制代码 代码如下: <input type="checkbox" name="cb" value="1" />aa <input type="checkbox" name="cb" value="2" />bb <input type="checkbox" name="cb&q

  • 原生js 实现表单验证功能

    原生js 实现表单验证功能

    表单验证是web前端最常见的功能之一,也属于前端开发的基本功.自己完成一个表单验证的开发,也有助于加深对字符串处理和正则表达式的理解. 基本的表单验证包括如:字母验证.数字验证.字母和数字验证.汉字验证.密码验证.日期验证.手机验证.邮箱验证,密码验证等. 现在就来完成这些验证代码的编写,先来看字母是怎么验证的.先编写需要的html代码,创建一个id为formContainer的表单元素,在里面加入需要验证英文字母的文本框和按钮,文本框后面需要一个span元素存放提示文字.如下所示: <form

  • 原生js实现表单的正则验证（验证通过后才可提交）

    原生js实现表单的正则验证（验证通过后才可提交）

    实现了如下功能: 1.用户名:onfouc显示msg规则:onkeyup计算字符,其中中文为两个字符:onblur,验证是否通过 2.邮箱:onblur 正则匹配,正则是根据自己的需求写的,可以根据个人需求更改 3..密码:onkeyup时显示密码的强弱度,onblur时验证密码,是否为相同字符,是否全字符,或全数字,长度是否符合要求 4.确认密码:验证是否和上一次一致 5.提交按钮只有在全部input验证通过后才有效,否则无效 主要知识点: 1.中文为两个字符: function getLen

  • 详解基于原生JS验证表单组件xy-form

    原生form表单 form 表单元素大家可能都用到过,除了可以提交表单外,还有一些内置的表单校验,比如 require . minlength . maxlength ,还有各种类型的 input ,比如 type=email 可以校验是否是邮箱类型,如果不满足还可以使用 pattern 进行正则校验. 原生的表单验证大概如下 虽然丑陋,功能却很强大,基本可以满足一般的需求,不过ui终究过于原生,而且也不方便自定义,所以很多情况下这种默认的表单验证并不使用. 下面来看看 xy-form 下的效果

  • JS实现表单多文件上传样式美化支持选中文件后删除相关项

    JS实现表单多文件上传样式美化支持选中文件后删除相关项

    开发中会经常涉及到文件上传的需求,根据业务不同的需求,有不同的文件上传情况. 有简单的单文件上传,有多文件上传,因浏览器原生的文件上传样式及功能的支持度不算太高,很多时候我们会对样式进行美化,对功能进行完善. 本文根据一个例子,对多文件的上传样式做了一些简单的美化(其实也没怎么美化..),同时支持选择文件后自定义删除相关的文件,最后再上传 文章篇幅较长,先简单看看图示: 一.文件上传基础 1. 单文件上传 最简单的文件上传,是单文件上传,form标签中加入enctype="multipart/f

  • 推荐一个基于Node.js的表单验证库

    API 在执行过程中的一个基本任务是数据验证. 在本文中,我想向你展示如何为你的数据添加防弹验证,同时返回风格良好的格式. 在 Node.js 中进行自定义数据验证既不容易也不快. 为了覆盖所有类型的数据,需要写许多函数. 虽然我已经尝试了一些 Node.js 的表单库 -- Express 和 Koa --他们从未满足我的项目需求. 这些扩展库要么不兼容复杂的数据结构,要么在异步验证出现问题. 使用 Datalize 在 Node.js 中进行表单验证 这就是为什么我最终决定编写自己的小巧而强

  • js前端表单数据处理表单数据校验

    js前端表单数据处理表单数据校验

    目录 前言 1.数据处理 1.1 场景1 :过滤我不要的数据 1.2 场景2:只提取我要的数据 1.3 场景3 :覆盖数据 1.4 场景4 :字段映射 1.5 场景5 : 数据映射 1.6 场景6: 数据合并 2.表单校验 2.1 简单版的单字段检查 2.2 简单版的多字段检查 2.3 Iview 组件库 form表单组件的校验实现 2.4 element 组件库 ElForm表单组件的校验实现 2.5 常见校验规则 前言 这段时间一直在搞to B方向中后台的项目,表单接触的频率会比较多,就突发

  • JS实现表单验证案例

    JS实现表单验证案例

    本文实例为大家分享了JS实现表单验证案例的具体代码,供大家参考,具体内容如下 1.当输入框失去焦点时,验证输入内容是否符合要求 (1)获取表单输入框(2)绑定 onblur 事件(3)获取输入内容(4)判断是否符合规则(5)如果不符合规则,则显示错误提示信息 2.当点击注册按钮是,判断所有输入框的内容是否符合要求,如果不符合则阻止表单提交 (1)获取表单对象(2)微表单对象绑定 onsubmit(3)判断所有输入框是否都符合要求,如果符合,则返回true,如果有一项不符合,则返回false <b

  • 用js提交表单解决一个页面有多个提交按钮的问题

    用js提交表单解决一个页面有多个提交按钮的问题,主要是判断是否为提交文本,然后再执行相应的动作,比较简单. <pre class="javascript" name="code">function check(txt){ $j("form").submit(function(){ if($txt=="提交"){ this.action="doAddMessage.action?button=提交"

  • js实现表单Radio切换效果的方法

    js实现表单Radio切换效果的方法

    本文实例讲述了js实现表单Radio切换效果的方法.分享给大家供大家参考.具体如下: 这里基于js实现表单中的Radio单选框切换效果,当选中某个单选框的时候,所属范围会一同变换,我觉得大家应该收藏一下,以前想用的时候苦苦叫不上这种效果的名字,现在找到了,而且实现起来竟然如此简单,有些地方要注意,获取标签名为myradio的标签. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-table-radio-cha-codes/ 具体代码如下:

随机推荐