js和jquery分别验证单选框、复选框、下拉框


Posted in Javascript onDecember 17, 2015

本文分别介绍了js和jQuery验证单选框(radio)、多选框(checkbox)、下拉框(select),分享给大家供大家参考,具体内容如下

(1).首先说单选框(radio),radio和checkbox一样都是name相同值有多个在获取 radio 值的时候我们不能按照普通文本框.value的方式,而是要判断哪个被选中了。

js验证是要用getElementsByName()获取数组

js代码如下:

<script>
 function test(){
 var sex = document.getElementsByName("sex");
 var flag = 0;
 for (var i=0;i<sex.length;i++)
 {
 if (sex.item(i).checked == true)
 {
 flag = 1;
 break;
 }
 }
 if (!flag)
 {
 alert("请选择性别");
 }
 }
 </script>
 <input type="radio" name="sex" value="m">男<input type="radio" name="sex" value="f">女
 <input type="button" id="btn" value="提交" onclick="test()">

用jQuery验证就简单多了,做到了少写多做,呵呵:

<script src="jquery-1.7.1.min.js"></script>
 <script>
$(document).ready(function(){
$("#btn").click(function(){
if ($(":radio:checked").length == 0)
{
alert("你的性别未选择");
}
});
});
 </script>
 <input type="radio" name="sex" value="m">男<input type="radio" name="sex" value="f">女
 <input type="button" id="btn" value="提交">

(2)复选框(checkbox),这个真不用讲了,因为复选框和单选框的做法完全相同,只要把上面脚本中radio改成checkbox就ok啦!

(3)下拉框(select)
使用js验证,js代码:

<script>
function test(){
var sex = document.getElementById("sex").value;
if (!sex)
{
alert("你的性别未选择");
}
}
 </script>
 <select id="sex">
<option value="">--请选择性别--</option>
<option value="m">男</option>
<option value="f">女</option>
 </select>
 <input type="button" id="btn" value="提交" onclick="test()">

使用jQuery验证:

<script src="jquery-1.7.1.min.js"></script>
 <script>
$(document).ready(function(){
$("#btn").click(function(){
if ($("#sex").val() == '')
{
alert("你的性别未选择");
}
});
});
 </script>
 <select id="sex">
<option value="">--请选择性别--</option>
<option value="m">男</option>
<option value="f">女</option>
 </select>
 <input type="button" id="btn" value="提交">

如果大家还想深入学习,可以点击jquery下拉框效果汇总、JavaScript下拉框效果汇总进行学习。

以上就是关于js和jquery分别验证单选框、复选框、下拉框的代码,根据难易进行介绍,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jquery 模拟类搜索框自动完成搜索提示功能(改进)
May 24 Javascript
JS DOM 操作实现代码
Aug 01 Javascript
js自执行函数的几种不同写法的比较
Aug 16 Javascript
jQuery实现简单隔行变色的方法
Feb 20 Javascript
javascript 动态样式添加的简单实现
Oct 11 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
javascript定时器取消定时器及优化方法
Jul 08 Javascript
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
js原生方法被覆盖,从新赋值原生的方法
Jan 02 Javascript
vue中倒计时组件的实例代码
Jul 06 Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 Javascript
详解vue 中 scoped 样式作用域的规则
Sep 14 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 #Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
Dec 17 #Javascript
jQuery选择器用法实例详解
Dec 17 #Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 #Javascript
js倒计时简单实现方法
Dec 17 #Javascript
高效的jquery数字滚动特效
Dec 17 #Javascript
JS函数的几种定义方式分析
Dec 17 #Javascript
You might like
使用 MySQL Date/Time 类型
2008/03/26 PHP
php中的三元运算符使用说明
2011/07/03 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
简单JS代码压缩器
2006/10/12 Javascript
firefox中JS读取XML文件
2006/12/21 Javascript
javascript 遍历验证所有文本框的值
2009/08/27 Javascript
JS类的封装及实现代码
2009/12/02 Javascript
Web开发之JavaScript
2012/03/29 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
DOM 高级编程
2015/05/06 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
seajs实现强制刷新本地缓存的方法分析
2017/10/16 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
2018/12/09 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
简单上手Python中装饰器的使用
2015/07/12 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
python re模块的高级用法详解
2018/06/06 Python
解决python中用matplotlib画多幅图时出现图形部分重叠的问题
2019/07/07 Python
python字符串,元组,列表,字典互转代码实例详解
2020/02/14 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
Pycharm调试程序技巧小结
2020/08/08 Python
Python截图并保存的具体实例
2021/01/14 Python
英国川宁茶官方网站:Twinings茶
2019/05/21 全球购物
SQL Server数据库笔试题和答案
2016/02/04 面试题
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
留学推荐信怎么写
2014/01/25 职场文书
建筑工程技术专业求职信
2014/07/16 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
你需要掌握的20个Python常用技巧
2022/02/28 Python
解决IIS7下无法绑定https主机的问题
2022/04/29 Servers