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

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

复制代码 代码如下:


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


2.设置单选按钮
Code:

复制代码 代码如下:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta 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" action="">
<p>您使用的相机品牌</p>
<p>
<input type="radio" value="Canon">
    <label for="canon">Canon</label>
</p>
<p>
<input type="radio" value="Nikon">
    <label for="nikon">Nikon</label>
</p>
<p>
<input type="radio" value="Sony">
    <label for="sony">Sony</label>
</p>
<p>
<input type="radio" value="Tentax">
    <label for="pentax">Tentax</label>
</p>
<p>
<input type="button" value="检查选中对象">
    <input type="button" value="设置为Canon">
</p>
</form>
</body>
</html>


3.设置复选框
Code:

复制代码 代码如下:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta 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" action="">
<p>
<input type="checkbox" value="ball">
    <label for="ball">打球</label>
</p>
<p>
<input type="checkbox" value="TV">
    <label for="TV">看电视</label>
</p>
<p>
<input type="checkbox" value="net">
    <label for="net">上网</label>
</p>
<p>
<input type="checkbox" value="book">
    <label for="book">看书</label>
</p>
<p>
<input type="checkbox" value="run">
    <label for="run">跑步</label>
</p>
<p>
       <input type="button" value="全选">
    <input type="button" value="全不选"/>
    <input type="button" value="反选"/>
</p>
</form>
</body>
</html>


4.设置下拉菜单
下拉菜单中最重要的莫过于访问被用户选中的选项,对于单选下拉菜单可以通过selectedIndex属性轻松地访问到选项。
Code:

复制代码 代码如下:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta 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" action="">
<p>
<select>
     <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="查看选项" />
</p>
</form>
</body>
</html>

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdzsfy.html