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">男
<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="设定特定的按钮为选中" 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>
分享到：
相关推荐
jQuery formValidator表单验证插件，它是基于jQuery类库，实现了js脚本于页面html代码的分离。你可以划分多个校验组，每个组的校验都是互不影响。对一个表单对象，你只需要写一行代码就可以轻松实现无数种（理论上）...
java 基础表单验证方法，java 基础表单验证方法，java 基础表单验证方法
AngularJS是前端开发流行框架，本Demo展示了表单验证的意义，及实现方法，掌握Angular基础指令，通过不同的指令元素可以拥有不同功能，并通过指令与表单合作验证，从而实现表单验证的敏捷化开发。
jquery的基础知识运用， jquery表单验证实例，深入了解
很久没有写文章了，学习了一下webpack，基础的一些组件，今天带来form表单验证组件（element.iviewui）的一期教程（作为一个菜鸡毕竟经历众多项目可以给一些新手一点提示 （QQ群技术讨论）838293023备注（github进来...
当鼠标离开文本框是,根据判断条件更换提示的图片,已达到更好的用户体验效果
例如它不内置表单验证，接下来，我把自己实现验证框架的思路分享出来。 分析需求 我们找的插件主要能解决以下问题 支持中文 适应UI框架 分组验证 动态验证（数据动态，规则动态） 去网络上搜索了一些框架，...
头歌PHP语言之表单进阶 教程 四关教程
在 SharePoint 2010 中设置基于表单的身份验证 (FBA) 时，我发现自己真的对不断修改配置文件厌烦了。与以前版本相比，现在需要做更多的工作，因为现在我们需要修改一个附加的 web.config 文件 - 针对 STS。如果您不...
使用AJAX的 登录表单验证 简单案例 以登录界面为例，首先编写登录页面 login.jsp 如果登录成功，则界面显示登录成功后的页面 如果登录失败，则界面显示登录失败后的页面 在登录时，浏览器窗口不刷新，浏览器地址栏...
主要给大家介绍了关于Angular8基础应用之表单及其验证的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Angular8具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
前端初学者完成的一个用户注册登陆界面的板块，有自动生成随机验证码、基本表单验证、禁止输入违禁词、账号信息录入等基础功能，就当作学习过程中的一个笔记。适用于前端新手，部分地方不够完善。
下面小编就为大家带来一篇JavaScript 基础表单验证示例(纯Js实现)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
既然是表单，我们得有基础的表单HTML结构，下面是我创建的结构，三个表单都是必填字段，并且对于tel一栏我们设置了自定义的验证规则：必须是11位数字。 <form> <label for=tel>Tel: <input type=tel ...
区域扫描基础组件和元素并索引可验证的元素。 另一方面，提供者是围绕区域的包装器，并允许它们之间进行通信。 为了与其他区域的值匹配，需要进行此通信。 它也可以用于一次验证所有区域，并防止在并非所有区域都...
基础验证例子 复制代码 代码如下: $validator = Validator::make( array(‘name’ => ‘Dayle’), array(‘name’ => ‘required|min:5’) ); 传递给 make 函数的第一个参数是待验证的数据，第二个参数是对该数据...
Camunda Javascript（Nashorn）表单验证（服务器端） 通过以下操作，可以对启动事件和用户任务的表单提交进行服务器端验证。 使用Nashorn引擎通过Java ScriptEngine服务启用验证。为什么这需要存在？ Camunda提供了...
本文我们将介绍 Reactive Form 表单验证的相关知识，具体内容如下： 使用内建的验证规则 动态调整验证规则 自定义验证器 自定义验证器 (支持参数) 跨字段验证 基础知识 内建验证规则 Angular 提供了一些内建...