js控制表单操作的常用代码小结
收集了一些在WEB前台开发中常用的一些控制表单操作函数。
1.鼠标经过时自动选择文本
鼠标划过自动选中：<input type="text" value="默认值" onMouseOver="this.focus();" onfucus="this.seelct()" />
2.设置单选按钮
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>js操作表单--www.jbxue.com</title>
<script language="javascript">
function getChoice(){
var oForm=document.forms["myForm1"];
var aChoice=oForm.camera;
for(i=0;i<aChoice.length;i++)
if(aChoice[i].checked)
break;
alert("您使用的相机品牌是："+aChoice[i].value);
}
function setChoice(iNum){
var oForm=document.forms["myForm1"];
oForm.camera[iNum].checked=true;
}
</script>
</head>
<body>
<form method="post" name="myForm1" action="">
<p>您使用的相机品牌</p>
<p>
<input type="radio" name="camera" id="canon" value="Canon">
<label for="canon">Canon</label>
</p>
<p>
<input type="radio" name="camera" id="nikon" value="Nikon">
<label for="nikon">Nikon</label>
</p>
<p>
<input type="radio" name="camera" id="sony" value="Sony">
<label for="sony">Sony</label>
</p>
<p>
<input type="radio" name="camera" id="pentax" value="Tentax">
<label for="pentax">Tentax</label>
</p>
<p>
<input type="button" value="检查选中对象" onClick="getChoice();">
<input type="button" value="设置为Canon" onClick="setChoice(0);">
</p>
</form>
</body>
</html>
3.设置复选框
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>js操作表单--www.jbxue.com</title>
<script language="javascript">
function changeBoxes(action){
var oForm=document.forms["myForm1"];
var oCheckBox=oForm.hobby;
for(var i=0;i<oCheckBox.length;i++)//遍历每一个选项
if(action<0) //反选
oCheckBox[i].checked=!oCheckBox[i].checked;
else
oCheckBox[i].checked=action;
}
</script>
</head>
<body>
<form method="post" name="myForm1" action="">
<p>
<input type="checkbox" name="hobby" id="ball" value="ball">
<label for="ball">打球</label>
</p>
<p>
<input type="checkbox" name="hobby" id="TV" value="TV">
<label for="TV">看电视</label>
</p>
<p>
<input type="checkbox" name="hobby" id="net" value="net">
<label for="net">上网</label>
</p>
<p>
<input type="checkbox" name="hobby" id="book" value="book">
<label for="book">看书</label>
</p>
<p>
<input type="checkbox" name="hobby" id="run" value="run">
<label for="run">跑步</label>
</p>
<p>
<input type="button" value="全选" onClick="changeBoxes(1);">
<input type="button" value="全不选" onClick="changeBoxes(0);"/>
<input type="button" value="反选" onClick="changeBoxes(-1);"/>
</p>
</form>
</body>
</html>
4.设置下拉菜单
下拉菜单中最重要的莫过于访问被用户选中的选项，对于单选下拉菜单可以通过selectedIndex属性轻松地访问到选项。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>js操作表单--www.jbxue.com</title>
<script language="javascript">
function checkSingle(){
var oForm=document.forms["myForm1"];
var oSelectBox=oForm.constellation;
var iChoice=oSelectBox.selectedIndex;//获取选中项
alert("您选中了："+oSelectBox.options[iChoice].text);
}
</script>
</head>
<body>
<form method="post" name="myForm1" action="">
<p>
<select id="constellation" name="constellation">
<option value="Aries" selected="selected">白羊</option>
<option value="Taurus">金牛</option>
<option value="Gemin">双子</option>
<option value="Leo">狮子</option>
<option value="Virgo">处女</option>
</select>
</p>
<p>
<input type="button" value="查看选项" onClick="checkSingle();" />
</p>
</form>
</body>
</html>
js控制表单操作的常用代码小结的更多相关文章
- JS 08表单操作_表单域
一.表单的获取方式 document.getElementById() document.forms[index]; document.forms[form_name] document.form_n ...
- 不可错过的10个超棒jQuery表单操作代码片段
jQuery 绝对是一个伟大的开源javascript类库,是帮助我们快速和高效开发前端应用的利器.可能大家在日常的开发过程中常常会处理表单相关的 javascript,在今天这篇代码片段分享文章中, ...
- 10 个实用的 jQuery 表单操作代码片段
jQuery 绝对是一个伟大的开源JavaScript类库,是帮助我们快速和高效开发前端应用的利器.可能大家在日常的开发过程中常常会处理表单相关的 JavaScript,在今天这篇代码片段分享文章中, ...
- 10个超棒jQuery表单操作代码片段
jQuery绝对是一个伟大的开源javascript类库,是帮助我们快速和高效开发前端应用的利器.可能大家在日常的开发过程中常常会处理表单相关的javascript,在今天这篇代码片段分享文章中,这里 ...
- springmvc下js控制表单提交（表单提交前检验，提交后获取json返回值）
这个问题我搞了四天,终于搞懂.因为对js很不熟悉.郁闷的是后台代码出错总可以设置断点调试,前端js代码出错只能通过浏览器提供一些运行数据来分析,很不习惯. 首先说下逻辑:这是一个注册功能,我希望,注册 ...
- Jquery操作radio,checkbox,select表单操作实现代码
一 .Select jQuery获取Select选择的Text和Value: 1. $("#select_id").change(function(){//code...}); / ...
- fastadmin后台：在表单操作项添加操作按钮并控制弹出页面的大小
1.进入对应目录:eg(public/assets/js/backend/conmpany.js) 2.在field:'operate' 中添加buttons 源码: {field: 'operate ...
- 使用js控制表单重复提交（1加锁，2事件方式，3 EasyUI中解决表单重复提交）
方法一. var flag = true; $(function() { $("#interested").click(function() { beInterested(); } ...
- selenium多表单操作与多窗口，以及警告框处理
知识是需要经常温习的,不然是很容易遗忘的. 以前自己操作IFRAME,多窗口的时候,觉得很简单.半年没有操作自动化了,知识又还了回去. 写博客有一个好处,可以把自己记住的知识点记录下来,这样,以后自己 ...
随机推荐
- 矩阵经典题目四：送给圣诞夜的礼品(使用m个置换实现对序列的转变)
https://vijos.org/p/1049 给出一个序列,含n个数.然后是m个置换,求对初始序列依次进行k次置换,求最后的序列. 先看一个置换.把置换表示成矩阵的形式.然后将m个置换乘起来.那么 ...
- ZH奶酪：【数据结构与算法】并查集基础
1.介绍 并查集是一种树型数据结构,用于处理一些不相交集合的合并问题. 并查集主要操作有: (1)合并两个不相交集合: (2)判断两个元素是否属于同一个集合: (3)路径压缩: 2.常用操作 用fat ...
- JavaScript 之 变量
一:作用域 说起变量第一个要说到的肯定就是作用域,正是因为不熟悉JS的 作用域,往往就会把面向对象的作用域张冠李戴,毕竟有些东西总是习惯性的这样,但是并不是每次照搬都是可以的,那么下一个问题就来了,j ...
- Subversion快速入门教程
如何快速建立Subversion服务器,并且在项目中使用起来,这是大家最关心的问题,与CVS相比,Subversion有更多的选择,也更加的容易,几个命令就可以建立一套服务器环境,可以使用起来,这里配 ...
- Linux see 网卡当前流量
linux see网卡的当前流量 sar –n DEV 1 2 命令后面1 2 意思是:每一秒钟取1次值,取2次. DEV显示网络接口信息 -n参数很有用,他有6个不同的开关:DEV | EDEV ...
- OpenERP 的XML-RPC的轻度体验+many2many,one2many,many2one创建方式
来自:http://cn.openerp.cn/openerp_import_image_by_xmlrpc/ 每当夏秋之交,我们都有展会,展会完后,都有很多的新的潜在客户要添加,我们收了一大堆名片, ...
- java手动加载jar
@RequestMapping("/testJar") public @ResponseBody String exteriorJar(int ys, int csd,int jg ...
- 类的专有方法(__repr__)
# -*- coding: utf-8 -*- #python 27 #xiaodeng #http://blog.csdn.net/yyt8yyt8/article/details/7030416 ...
- iOS- 快速实现展示布局
概述 比较有规律的页面, 快速实现展示布局, 提高开发效率. 详细 代码下载:http://www.demodashi.com/demo/10713.html 看到这个界面,是不是觉得不像那种比较有规 ...
- static不实现多态
class Father { public static String getName() { return "father"; } } class Children extend ...