快捷導(dǎo)航

js控制表單操作的常用代碼小結(jié)

更新時(shí)間：2013年08月15日 17:59:15 投稿：shangke

本文章來給各位同學(xué)收集一些在WEB前臺開發(fā)中常用的一些控制表單操作函數(shù)，有需要的朋友可以參考一下

1.鼠標(biāo)經(jīng)過時(shí)自動選擇文本
Code:

鼠標(biāo)劃過自動選中：<input type="text" value="默認(rèn)值" onMouseOver="this.focus();" onfucus="this.seelct()" />

2.設(shè)置單選按鈕
Code:

復(fù)制代碼代碼如下:

<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("您使用的相機(jī)品牌是："+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>您使用的相機(jī)品牌</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="設(shè)置為Canon" onClick="setChoice(0);">
</p>
</form>
</body>
</html>

3.設(shè)置復(fù)選框
Code：

復(fù)制代碼代碼如下:

<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++)//遍歷每一個(gè)選項(xiàng)
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">上網(wǎng)</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.設(shè)置下拉菜單
下拉菜單中最重要的莫過于訪問被用戶選中的選項(xiàng)，對于單選下拉菜單可以通過selectedIndex屬性輕松地訪問到選項(xiàng)。
Code:

復(fù)制代碼代碼如下:

<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;//獲取選中項(xiàng)
alert("您選中了："+oSelectBox.options[iChoice].text);
}
</script>
</head>
<body>
<form method="post" name="myForm1" action="">
<p>
</p>
<p>
<input type="button" value="查看選項(xiàng)" onClick="checkSingle();" />
</p>
</form>
</body>
</html>