提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

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

JS控制代码 操作 常用 小结 表单
2023-06-13 09:15:04 时间
1.鼠标经过时自动选择文本
Code:
复制代码代码如下:

鼠标划过自动选中：<inputtype="text"value="默认值"onMouseOver="this.focus();"onfucus="this.seelct()"/>

2.设置单选按钮
Code:
复制代码代码如下:

<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metaname="viewport"content="initial-scale=1.0,user-scalable=no"/>
<title>js操作表单</title>
<scriptlanguage="javascript">
functiongetChoice(){
varoForm=document.forms["myForm1"];
varaChoice=oForm.camera;
for(i=0;i<aChoice.length;i++)
if(aChoice[i].checked)
break;
alert("您使用的相机品牌是："+aChoice[i].value);
}
functionsetChoice(iNum){
varoForm=document.forms["myForm1"];
oForm.camera[iNum].checked=true;
}
</script>
</head>
<body>
<formmethod="post"name="myForm1"action="">
<p>您使用的相机品牌</p>
<p>
<inputtype="radio"name="camera"id="canon"value="Canon">
   <labelfor="canon">Canon</label>
</p>
<p>
<inputtype="radio"name="camera"id="nikon"value="Nikon">
   <labelfor="nikon">Nikon</label>
</p>
<p>
<inputtype="radio"name="camera"id="sony"value="Sony">
   <labelfor="sony">Sony</label>
</p>
<p>
<inputtype="radio"name="camera"id="pentax"value="Tentax">
   <labelfor="pentax">Tentax</label>
</p>
<p>
<inputtype="button"value="检查选中对象"onClick="getChoice();">
   <inputtype="button"value="设置为Canon"onClick="setChoice(0);">
</p>
</form>
</body>
</html>

3.设置复选框
Code：
复制代码代码如下:
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metaname="viewport"content="initial-scale=1.0,user-scalable=no"/>
<title>js操作表单</title>
<scriptlanguage="javascript">
functionchangeBoxes(action){
varoForm=document.forms["myForm1"];
varoCheckBox=oForm.hobby;
for(vari=0;i<oCheckBox.length;i++)//遍历每一个选项
if(action<0)//反选
oCheckBox[i].checked=!oCheckBox[i].checked;
else
oCheckBox[i].checked=action;
}
</script>
</head>
<body>
<formmethod="post"name="myForm1"action="">
<p>
<inputtype="checkbox"name="hobby"id="ball"value="ball">
   <labelfor="ball">打球</label>
</p>
<p>
<inputtype="checkbox"name="hobby"id="TV"value="TV">
   <labelfor="TV">看电视</label>
</p>
<p>
<inputtype="checkbox"name="hobby"id="net"value="net">
   <labelfor="net">上网</label>
</p>
<p>
<inputtype="checkbox"name="hobby"id="book"value="book">
   <labelfor="book">看书</label>
</p>
<p>
<inputtype="checkbox"name="hobby"id="run"value="run">
   <labelfor="run">跑步</label>
</p>
<p>
      <inputtype="button"value="全选"onClick="changeBoxes(1);">
   <inputtype="button"value="全不选"onClick="changeBoxes(0);"/>
   <inputtype="button"value="反选"onClick="changeBoxes(-1);"/>
</p>
</form>
</body>
</html>

4.设置下拉菜单
下拉菜单中最重要的莫过于访问被用户选中的选项，对于单选下拉菜单可以通过selectedIndex属性轻松地访问到选项。
Code:
复制代码代码如下:
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metaname="viewport"content="initial-scale=1.0,user-scalable=no"/>
<title>js操作表单</title>
<scriptlanguage="javascript">
functioncheckSingle(){
varoForm=document.forms["myForm1"];
varoSelectBox=oForm.constellation;
variChoice=oSelectBox.selectedIndex;//获取选中项
alert("您选中了："+oSelectBox.options[iChoice].text);
}
</script>
</head>
<body>
<formmethod="post"name="myForm1"action="">
<p>
<selectid="constellation"name="constellation">
    <optionvalue="Aries"selected="selected">白羊</option>
       <optionvalue="Taurus">金牛</option>
       <optionvalue="Gemin">双子</option>
       <optionvalue="Leo">狮子</option>
       <optionvalue="Virgo">处女</option>
   </select>
</p>
<p>
<inputtype="button"value="查看选项"onClick="checkSingle();"/>
</p>
</form>
</body>
</html>

相关文章