表单基础验证

jquery关于表单元素的操作:

 

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
  </head>
  <style type="text/css">
  	.table2{width:100%}
	.table2 td,.table2 th,.table4 td,.table4 th{border-top:1px solid #fff; border-left:1px solid #fff; border-right:1px solid #dddddd; border-bottom:1px solid #dddddd; padding:3px 5px 3px}
	.table2 .cols{background:#e5f0f5; text-align:right; border-bottom:1px solid #c0d0dc; border-right:1px solid #cad8e2; font-family:'\5b8b\4f53' arial, tahoma}
	.table2 .text{width:160px; height:20px; border-left:1px solid #909193; border-top:1px solid #909193; border-bottom:1px solid #e8e8e9; border-right:1px solid #e8e8e9; padding:0 4px; line-height:20px}
	.table2 .cols2{background:#e5f0f5; text-align:center; border-bottom:1px solid #c0d0dc; border-right:1px solid #cad8e2; font-family:'\5b8b\4f53' arial, tahoma}
	.table2 .cols_c{background:#e5f0f5; text-align:center; border-bottom:1px solid #c0d0dc; border-right:1px solid #cad8e2; font-family:'\5b8b\4f53' arial, tahoma}
  </style>
  <body>
   	<form action="" onsubmit="return check()">
   		<table class="table2" cellpadding="0" cellspacing="0" border="0">
   			<tr>
   				<td class="cols">姓名:</td>
   				<td colspan="3">
   					<input type="text" id="userName" name="userName" value=""/>
   				</td>
   			</tr>
   			<tr>
   				<td class="cols">性别:</td>
   				<td colspan="3">
   					<input type="radio" id="userAge_1" name="userAge" value="1" checked="checked">男&nbsp;
   					<input type="radio" id="userAge_2" name="userAge" value="2" >女&nbsp;
   					<input type="radio" id="userAge_3" name="userAge" value="3" >妖怪 
   				</td>
   			</tr>
   			<tr>
   				<td class="cols">行业:</td>
   				<td colspan="3">
   					<input type="checkbox" id="userIndustry_1" name="userIndustry" value="1" checked="checked">IT/互联网&nbsp;
   					<input type="checkbox" id="userIndustry_2" name="userIndustry" value="2" >教育&nbsp;
   					<input type="checkbox" id="userIndustry_3" name="userIndustry" value="3" >医院 
   				</td>
   			</tr>
   			<tr>
   				<td class="cols">学历:</td>
   				<td colspan="3">
   					<select id="userDegree" name="userDegree">
   						<option value="">请选择</option>
   						<option value="1">大专</option>
   						<option value="2">本科</option>
   						<option value="3">硕士</option>
   					</select>
   				</td>
   			</tr>
   			<tr>
   				<td class="cols">备注:</td>
   				<td colspan="3">
   					<textarea rows="5" cols="50" id="remark" name="remark"></textarea>
   				</td>
   			</tr>
   			<tr>
   				<td class="cols">单选的操作按钮:</td>
   				<td colspan="3" align="left">
   					<input type="button" value="设定特定的按钮为选中" onclick="radioOper()">
   				</td>
   			</tr>
   			<tr>
   				<td class="cols">下拉的操作按钮:</td>
   				<td colspan="3" align="left">
   					<input type="button" value="得到选中的文本" onclick="selectOper(1)">
   					<input type="button" value="设定特定的下标为选中" onclick="selectOper(2)">
   				</td>
   			</tr>
   			<tr>
   				<td class="cols">多选的操作按钮:</td>
   				<td colspan="3" align="left">
   					<input type="button" value="全选" onclick="checkOper(1)">
   					<input type="button" value="全不选" onclick="checkOper(2)">
   					<input type="button" value="选择奇数" onclick="checkOper(3)">
   					<input type="button" value="反选" onclick="checkOper(4)">
   				</td>
   			</tr>
   			<tr>
   				<td colspan="4" align="center">
   					<input type="submit" value="提   交">
   				</td>
   			</tr>
   		</table>
   	</form>
  </body>
</html>
<script type="text/javascript" src="js/jquery-1.6.4.js"></script>
<script type="text/javascript">
	function check(){
		//得到文本框的值
		var userName = $('#userName').val();
		alert('userName:'+userName);
		
		//得到单选框的值
		var userAge = $(":radio[name='userAge']").val();
		alert('userAge:'+userAge);
		
		//得到多选框的值
		var chk_value =[];
  		$('input[name="userIndustry"]:checked').each(function(){
   			chk_value.push($(this).val());
  		});
  		alert('chk_value:'+chk_value);
		
		//得到下拉框的值
		var userDegree = $('#userDegree').val();
		alert('userDegree:'+userDegree);
		
		//得到备注的值
		var remark = $('#remark').val();
		alert('remark:'+remark);
		
		return false;
	}
	
	//下拉框的操作
	function selectOper(operType){
		if(operType == 1){
			//得到选中的文本
			var userDegreeText = $('#userDegree').find('option:selected').text();
			alert('userDegreeText:'+userDegreeText);
		}else if(operType == 2){
			//设定制定的单选下标为选中状态
			$('#userDegree')[0].selectedIndex = 3;
		}
	}
	
	//单选框的操作
	function radioOper(){
		$('input[name=userAge]').get(2).checked = true;
	}
	
	//多选框的操作
	function checkOper(operType){
		if(operType == 1){
			//多选框的全选操作
			$("[name='userIndustry']").attr("checked",'true');//全选  
		}else if(operType == 2){
			//取消全选
			$("[name='userIndustry']").removeAttr("checked");//取消全选  
		}else if(operType == 3){
			$("[name='userIndustry']:even").attr("checked",'true');//选中所有奇数  
		}else if(operType == 4){
			$("[name='userIndustry']").each(function(){//反选  
				if($(this).attr("checked")){  
					$(this).removeAttr("checked");  
				}else{  
					$(this).attr("checked",'true');  
				}  
			});
		}
		
	}
</script>
 

你可能感兴趣的:(基础)