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 相关文章推荐
基于jquery的网页SELECT下拉框美化代码
Oct 28 Javascript
jQuery 源码分析笔记(5) jQuery.support
Jun 19 Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
May 05 Javascript
bootstrap table小案例
Oct 21 Javascript
详解ES6中的let命令
Apr 05 Javascript
Vue.js手风琴菜单组件开发实例
May 16 Javascript
JS创建Tag标签的方法详解
Jun 09 Javascript
vue单个组件实现无限层级多选菜单功能
Apr 10 Javascript
jQuery获取随机颜色的实例代码
May 21 jQuery
vue-loader中引入模板预处理器的实现
Sep 04 Javascript
Vue toFixed保留两位小数的3种方式
Oct 23 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 mysql与mysqli事务使用说明 分享
2013/08/17 PHP
php防止恶意刷新与刷票的方法
2014/11/21 PHP
PHP实现的同步推荐操作API接口案例分析
2016/11/30 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
javascript 计算两个整数的百分比值
2009/12/26 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
jQuery插件的写法分享
2013/06/12 Javascript
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
基于jquery实现的省市区级联无ajax
2013/09/24 Javascript
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
2014/12/14 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
javascript 封装Date日期类实例详解
2017/05/28 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
JS实现的抛物线运动效果示例
2018/01/30 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
vue穿梭框实现上下移动
2021/01/29 Vue.js
python解析xml文件实例分享
2013/12/04 Python
Python常用随机数与随机字符串方法实例
2015/04/09 Python
使用Python的urllib和urllib2模块制作爬虫的实例教程
2016/01/20 Python
Python利用BeautifulSoup解析Html的方法示例
2017/07/30 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
python 批量添加的button 使用同一点击事件的方法
2019/07/17 Python
python绘制动态曲线教程
2020/02/24 Python
Python带参数的装饰器运行原理解析
2020/06/09 Python
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
师范毕业生个人求职信
2013/12/09 职场文书
实验心得体会
2014/09/05 职场文书
2014年药房工作总结
2014/11/22 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书
离婚协议书范本
2015/01/26 职场文书
CocosCreator ScrollView优化系列之分帧加载
2021/04/14 Python
html form表单基础入门案例讲解
2021/07/15 HTML / CSS
python中Pyqt5使用Qlabel标签播放视频
2022/04/22 Python