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循环map功能的代码
Feb 26 Javascript
一个关于jqGrid使用的小例子(行按钮)
Nov 04 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
Apr 07 Javascript
Node.js(安装,启动,测试)
Jun 09 Javascript
JQuery自适应窗口大小导航菜单附源码下载
Sep 01 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
Dec 08 Javascript
AngularJS中使用three.js的实例详解
Jul 21 Javascript
Bootstrap模态对话框用法简单示例
Aug 31 Javascript
Angular脚手架开发的实现步骤
Apr 09 Javascript
JavaScript数组排序功能简单实现
May 14 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 Javascript
何时/使用 Vue3 render 函数的教程详解
Jul 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
用PHP和ACCESS写聊天室(七)
2006/10/09 PHP
有关 PHP 和 MySQL 时区的一点总结
2008/03/26 PHP
Cakephp 执行主要流程
2010/03/24 PHP
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
用PHP即时捕捉PHP中的错误并发送email通知的实现代码
2013/01/19 PHP
PHP中防止SQL注入方法详解
2014/12/25 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
2010/10/17 Javascript
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
动态加载jQuery的方法
2015/06/16 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
2016/10/19 Javascript
jQuery通过ajax快速批量提交表单数据
2016/10/25 Javascript
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
python文件和目录操作方法大全(含实例)
2014/03/12 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
python使用zip将list转为json的方法
2018/12/31 Python
python集合常见运算案例解析
2019/10/17 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
如何利用input事件来监听移动端的输入
2016/04/15 HTML / CSS
电子专业毕业生自我鉴定
2014/01/22 职场文书
超市中秋节活动方案
2014/02/12 职场文书
市场总经理岗位职责
2014/04/11 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
2019关于实习生工作安排及待遇的管理方案!
2019/07/16 职场文书