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 相关文章推荐
javaScript call 函数的用法说明
Apr 09 Javascript
Javascript中的this绑定介绍
Sep 22 Javascript
文本框获得焦点和失去焦点的判断代码
Mar 18 Javascript
Jquery图形报表插件 jqplot简介及参数详解
Oct 10 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
Jun 15 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
jQuery 表单序列化实例代码
Jun 11 jQuery
微信小程序wx.previewImage预览图片实例详解
Dec 07 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
Sep 27 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
PHP中PDO基础教程 入门级
2011/09/04 PHP
PHP人民币金额数字转中文大写的函数代码
2013/02/27 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
一个JQuery操作Table的代码分享
2012/03/30 Javascript
js showModalDialog参数的使用详解
2014/01/07 Javascript
JS的get和set使用示例
2014/02/20 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
基于jquery和svg实现超炫酷的动画特效
2014/12/09 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
JS实现课堂随机点名和顺序点名
2017/03/09 Javascript
JS实现简单短信验证码界面
2017/08/07 Javascript
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
默认浏览器设置及vue自动打开页面的方法
2018/09/21 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
2019/07/19 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
web.py获取上传文件名的正确方法
2014/08/26 Python
Python获取邮件地址的方法
2015/07/10 Python
python简单验证码识别的实现方法
2019/05/10 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
pandas中的series数据类型详解
2019/07/06 Python
python画图常规设置方式
2020/03/05 Python
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
中药学自荐信
2014/06/15 职场文书
建筑工地标语
2014/06/18 职场文书
广告学专业求职信
2014/06/19 职场文书
甜品店创业计划书
2014/08/14 职场文书
2014年小学工作总结
2014/11/26 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
MySQL数据库超时设置配置的方法实例
2021/10/15 MySQL
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android
Android开发实现极为简单的QQ登录页面
2022/04/24 Java/Android