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 学习笔记(onchange等)
Nov 14 Javascript
JS中showModalDialog 的使用解析
Apr 17 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
Jquery ajax基础教程
Nov 20 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
May 30 Javascript
javascript中异常处理案例(推荐)
Oct 03 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
JS遍历对象属性的方法示例
Jan 10 Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 Javascript
Vue单页应用引用单独的样式文件的两种方式
Mar 30 Javascript
jquery实现上传图片功能
Jun 29 jQuery
详解Vue的mixin策略
Nov 19 Vue.js
固定网页背景图同时保持图片比例的思路代码
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+MySQL的聊天室设计
2006/10/09 PHP
php学习之 认清变量的作用范围
2010/01/26 PHP
PHP无刷新上传文件实现代码
2011/09/19 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
Javascript 刷新全集常用代码
2009/11/22 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
2015/09/28 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
2016/05/31 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
JS Testing Properties 判断属性是否在对象里的方法
2017/10/01 Javascript
Node.js事件的正确使用方法
2019/04/05 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
2019/04/18 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
python使用装饰器和线程限制函数执行时间的方法
2015/04/18 Python
解决pyqt中ui编译成窗体.py中文乱码的问题
2016/12/23 Python
详解Python是如何实现issubclass的
2019/07/24 Python
Python中实现输入一个整数的案例
2020/05/03 Python
Python更换pip源方法过程解析
2020/05/19 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
解决margin 外边距合并问题
2019/07/03 HTML / CSS
2014年两会学习心得体会
2014/03/10 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
全国法院系统开展党的群众路线教育实践活动综述(全文)
2014/10/25 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书
Win11任务栏太宽了怎么办?一招解决Win11任务栏太宽问题
2021/11/21 数码科技