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 文档的编码问题解决
Mar 01 Javascript
jquery 弹出层实现代码
Oct 30 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
Nov 14 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
Jan 02 Javascript
js中传递特殊字符(+,&amp;)的方法
Jan 16 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
Aug 16 Javascript
vue axios请求拦截实例代码
Mar 29 Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
js中值引用和地址引用实例分析
Jun 21 Javascript
jQuery实现雪花飘落效果
Aug 02 jQuery
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
php适配器模式介绍
2012/08/14 PHP
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
php网站地图生成类示例
2014/01/13 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
一些不错的js函数ajax
2008/08/20 Javascript
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
让nodeJS支持ES6的词法----babel的安装和使用方法
2017/07/31 NodeJs
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
vue+Element-ui实现分页效果
2020/11/15 Javascript
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
Python素数检测的方法
2015/05/11 Python
python杀死一个线程的方法
2015/09/06 Python
让python在hadoop上跑起来
2016/01/27 Python
简单了解OpenCV是个什么东西
2017/11/10 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
python设计tcp数据包协议类的例子
2019/07/23 Python
python nmap实现端口扫描器教程
2020/05/28 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
python3.8下载及安装步骤详解
2020/01/15 Python
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
信息专业个人的自我评价
2013/12/27 职场文书
优秀班组长事迹
2014/05/31 职场文书
讲座开场白台词和结束语
2015/05/29 职场文书
导游词之无锡梅园
2019/11/28 职场文书
Vue组件更新数据v-model不生效的解决
2022/04/02 Vue.js