js控制表单操作的常用代码小结


Posted in Javascript onAugust 15, 2013

1.鼠标经过时自动选择文本
Code:

鼠标划过自动选中:<input type="text" value="默认值" onMouseOver="this.focus();" onfucus="this.seelct()" />

2.设置单选按钮
Code:
<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操作表单</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.设置复选框
Code:
<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操作表单</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属性轻松地访问到选项。
Code:
<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操作表单</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>
Javascript 相关文章推荐
js面向对象 多种创建对象方法小结
May 21 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 Javascript
jquery实现多次上传同一张图片
Jan 09 Javascript
Javascript中的 “&amp;” 和 “|” 详解
Feb 02 Javascript
js实现类bootstrap模态框动画
Feb 07 Javascript
详解微信小程序 登录获取unionid
Jun 27 Javascript
ligerUI---ListBox(列表框可移动的实例)
Nov 28 Javascript
javascript代码优化的8点总结
Jan 29 Javascript
ES6的异步操作之promise用法和async函数的具体使用
Dec 06 Javascript
vue 使用localstorage实现面包屑的操作
Nov 16 Javascript
js中实现继承的五种方法
Jan 25 Javascript
利用 JavaScript 构建命令行应用
Nov 17 Javascript
固定网页背景图同时保持图片比例的思路代码
Aug 15 #Javascript
jQuery UI 实现email输入提示实例
Aug 15 #Javascript
javascript中如何处理引号编码&amp;#034;
Aug 15 #Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 #Javascript
jquery ajax方式直接提交整个表单核心代码
Aug 15 #Javascript
js冒泡法和数组转换成字符串示例代码
Aug 14 #Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 #Javascript
You might like
德生1994机评
2021/03/02 无线电
PHP+javascript液晶时钟
2006/10/09 PHP
PHP简介
2006/10/09 PHP
上传多个文件的PHP脚本
2006/11/26 PHP
浅谈php冒泡排序
2014/12/30 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
Function.prototype.bind用法示例
2013/09/16 Javascript
jQuery遍历对象、数组、集合实例
2014/11/08 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
NodeJS实现图片上传代码(Express)
2017/06/30 NodeJs
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
JavaScript html5 canvas实现图片上画超链接
2017/10/20 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
vue 注册组件的使用详解
2018/05/05 Javascript
对于Python的Django框架部署的一些建议
2015/04/09 Python
Python常用的内置序列结构(列表、元组、字典)学习笔记
2016/07/08 Python
使用python实现对元素的长截图功能
2019/11/14 Python
Python PyPDF2模块安装使用解析
2020/01/19 Python
浅谈python量化 双均线策略(金叉死叉)
2020/06/03 Python
html5触摸事件判断滑动方向的实现
2018/06/05 HTML / CSS
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
林清轩官方网站:山茶花润肤油开创者
2016/10/26 全球购物
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
PHP笔试题
2012/02/22 面试题
《孔子拜师》教学反思
2014/02/24 职场文书
财务内勤岗位职责
2014/04/17 职场文书
大学生学习计划书
2014/09/15 职场文书
2014年老干部工作总结
2014/11/21 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书
2016年六一儿童节开幕词
2016/03/04 职场文书
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers