本文介绍了一个使用jQuery操作HTML表单元素的示例，包括文本框、单选按钮、复选框、下拉列表和文本区域等元素的值获取及状态设置的方法。
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="" οnsubmit="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">男
<input type="radio" id="userAge_2" name="userAge" value="2" >女
<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/互联网
<input type="checkbox" id="userIndustry_2" name="userIndustry" value="2" >教育
<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="设定特定的按钮为选中" οnclick="radioOper()">
</td>
</tr>
<tr>
<td class="cols">下拉的操作按钮：</td>
<td colspan="3" align="left">
<input type="button" value="得到选中的文本" οnclick="selectOper(1)">
<input type="button" value="设定特定的下标为选中" οnclick="selectOper(2)">
</td>
</tr>
<tr>
<td class="cols">多选的操作按钮：</td>
<td colspan="3" align="left">
<input type="button" value="全选" οnclick="checkOper(1)">
<input type="button" value="全不选" οnclick="checkOper(2)">
<input type="button" value="选择奇数" οnclick="checkOper(3)">
<input type="button" value="反选" οnclick="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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
