js 常用控制表单操作函数用法

人气：645 时间：2018-09-20

这篇文章主要为大家详细介绍了js 常用控制表单操作函数用法，具有一定的参考价值，可以用来参考一下。

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

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

2.设置单选按钮

经测试代码如下：


/**
 * 常用控制表单操作函数
 *
 * @param 
 * @arrange (512.笔记) www.q1010.com
 **/
<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>

3.设置复选框

经测试代码如下：


/**
 * 常用控制表单操作函数
 *
 * @param 
 * @arrange (512.笔记) www.q1010.com
 **/
<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>

4.设置下拉菜单

下拉菜单中最重要的莫过于访问被用户选中的选项，对于单选下拉菜单可以通过selectedIndex属性轻松地访问到选项。

经测试代码如下：


/**
 * 常用控制表单操作函数
 *
 * @param 
 * @arrange (512.笔记) www.q1010.com
 **/
<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>

本文来自：http://www.q1010.com/174/571-0.html

注：关于js 常用控制表单操作函数用法的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：表单

您可能感兴趣的文章

上一篇：js 冒泡法和数组转换字符串的简单示例

下一篇：js 判断对象是否拥有某一个属性的简单示例