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

分别讲一下js和jQuery验证单选框(radio)、多选框(checkbox)、下拉框(select) (1).首先说单选框(radio),radio和checkbox一样都是name相同值有多个在获取 radio 值的时候我们不能按照普通文本框.value的

分别讲一下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="提交">
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

demo展示1: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=http://www.w3.org/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / tit
工作中发现表单提交方便的问题,很多时候IE下提交好好的,打了火狐下就出现了问题,利用提交按钮就不成功了,于是利用JS的方式就成功了,也不知道为什么。在导师的催促下就总结出以下的几种常用表单提交的方法。 第一种方式:表单提交,在form标签中增加onsu
Dom元素 1 getElementById document.getElementById(id) 返回一个对象 2 getElementsByTagName document.getElementsByTagName(tag) 返回一个对象数组 运行使用*通配符,获取所有元素 dom.getElementsByTagName(*) 获取dom下所有子元素 3 getElementsByClass
鼠标点击remove链接,根据ajax的返回值删除页面父元素块。 做法如下: $(.remove).bind(click,function(){var div = $(this).parent(); //先获取父级元素$.ajax({type:post,url:$(this).attr(href),dataType:json,data:{id:$(this).attr(id)},success:functi
public class Cookie1 extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType(text/html;charset=utf-8); PrintWriter out = response.getW
本文实例讲述了jquery实现点击变换导航样式的方法。分享给大家供大家参考。具体如下: 这里分享一个导航点击变换样式的代码,近来看到很多网站的导航都是点击后导航样式跟着变化,今天就使用jqurey简单实现这一功能,高手勿喷。 运行效果截图如下: 代码如下