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

来源：互联网发布：qt 网络编程编辑：程序博客网时间：2024/06/03 21:16

收集一些在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;elseoCheckBox[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>