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 相关文章推荐
javascript 关于# 和 void的区别分析
Oct 26 Javascript
Jquery下attr和removeAttr的使用方法
Dec 28 Javascript
jQuery 常见操作实现方式和常用函数方法总结
May 06 Javascript
js用正则表达式来验证表单(比较齐全的资源)
Nov 17 Javascript
点击button获取text内容并改变样式的js实现
Sep 09 Javascript
js兼容火狐获取图片宽和高的方法
May 21 Javascript
一张Web前端的思维导图分享
Jul 03 Javascript
微信支付 JS API支付接口详解
Jul 11 Javascript
用jquery快速解决IE输入框不能输入的问题
Oct 04 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 Javascript
JavaScript实现缓动动画
Nov 25 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
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
js操作checkbox遇到的问题解决
2013/06/29 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
2013/07/25 Javascript
推荐6款基于jQuery实现图片效果插件
2014/12/07 Javascript
jquery中EasyUI使用技巧小结
2015/02/10 Javascript
js定义类的几种方法(推荐)
2016/06/08 Javascript
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
2017/09/25 Javascript
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
vue+php实现的微博留言功能示例
2019/03/16 Javascript
js里面的变量范围分享
2020/07/18 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
python实现百度关键词排名查询
2014/03/30 Python
python实现udp数据报传输的方法
2014/09/26 Python
python基本语法练习实例
2017/09/19 Python
在PyCharm中三步完成PyPy解释器的配置的方法
2018/10/29 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
Python画图实现同一结点多个柱状图的示例
2019/07/07 Python
Pycharm中出现ImportError:DLL load failed:找不到指定模块的解决方法
2019/09/17 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
html5的input的required使用中遇到的问题及解决方法
2018/04/24 HTML / CSS
德国骆驼商店:ActiveFashionWorld
2017/11/18 全球购物
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
综合办公室个人的自我评价
2013/12/22 职场文书
同学聚会欢迎辞
2014/01/14 职场文书
读群众路线心得体会
2014/03/07 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
神龙架导游词
2015/02/11 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
党员带头倡议书
2015/04/29 职场文书
团队拓展训练感想
2015/08/07 职场文书