js控制表单操作的常用代码小结
js控制表单操作的常用代码小结
发布时间:2016-12-30 来源:查字典编辑
摘要:1.鼠标经过时自动选择文本Code:复制代码代码如下:鼠标划过自动选中:2.设置单选按钮Code:复制代码代码如下:js操作表单functi...

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

Code:

复制代码 代码如下:

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

2.设置单选按钮

Code:

复制代码 代码如下:

<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("您使用的相机品牌是:"+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="检查选中对象">

<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 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++)//遍历每一个选项

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="全选">

<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 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;//获取选中项

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="查看选项" />

</p>

</form>

</body>

</html>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类