<script language="javascript">// JavaScript DocumentstartList = function() {if (document.all&&document.getElementById) {navRoot = document.getElementById("nav")for (i=0i<navRoot.childNodes.lengthi++) {node = navRoot.childNodes[i]if (node.nodeName=="LI") {node.onmouseover=function() {this.className+=" over"} node.onmouseout=function() { this.className=this.className.replace(" over", "")} } } }}window.onload=startList</script><style type=text/css><!--body { font: normal 11px verdana}ul { margin: 0padding: 0list-style: nonewidth: 150px/* Width of Menu Items */ border-bottom: 1px solid #ccc} ul li { position: relative} li ul { position: absoluteleft: 149px/* Set 1px less than menu width */ top: 0display: none}/* Styles for Menu Items */ul li a { display: blocktext-decoration: nonecolor: #777background: #fff/* IE6 Bug */ padding: 5pxborder: 1px solid #ccc/* IE6 Bug */ border-bottom: 0} /* Holly Hack. IE Requirement */* ul li { float: leftheight: 1%}* ul li a { height: 1%}/* End */li:hover ul, li.over ul { display: block} /* The magic */--></style><ul id="nav"><li><a #">Home</a></li><li><a #">About</a><ul><li><a #">History</a></li><li><a #">Team</a></li><li><a #">Offices</a></li></ul></li><li><a #">Services</a><ul><li><a #">Web Design</a></li><li><a #">Internet Marketing</a></li><li><a #">Hosting</a></li><li><a #">Domain Names</a></li><li><a #">Broadband</a></li></ul></li><li><a #">Contact Us</a><ul><li><a #">United Kingdom</a></li><li><a #">France</a></li><li><a #">USA</a></li><li><a #">Australia</a></li></ul></li></ul> lishixinzhi/Article/program/Java/Javascript/201311/25433
本文实例讲述了js使用DOM设置单选按钮、复选框及下拉菜单的方法。分享给大家供大家参考。具体实现方法如下:
1.设置单选按钮
单选按钮在表单中即<input
type="radio"
/>它是一组供用户选择的对象,但每次只能选一个。每一个都有checked属性,当一项选择为ture时,其它的都变为false.
先贴上一个例子:
复制代码
代码如下:<script
type="text/javascript">
function
getChoice()
{
var
oForm
=
document.forms["uForm1"]
var
aChoices
=
oForm.camera
for
(i
=
0
i
<
aChoices.length
i++)
//遍历整个单选项表
if
(aChoices[i].checked)
//如果发现了被选中项则退出
break
alert("相机品牌是:"
+
aChoices[i].value)
}
function
setChoice(iNum)
{
var
oForm
=
document.forms["uForm1"]
oForm.camera[iNum].checked
=
true
}
</script>
<form
method="post"
name="uForm1"
action="addInfo.aspx">
相机品牌:
<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"
checked>
<label
for="sony">Sony</label>
</p>
<p>
<input
type="radio"
name="camera"
id="olympus"
value="Olympus">
<label
for="olympus">Olympus</label>
</p>
<p>
<input
type="radio"
name="camera"
id="samsung"
value="Samsung">
<label
for="samsung">Samsung</label>
</p>
<p>
<input
type="radio"
name="camera"
id="pentax"
value="Pentax">
<label
for="pentax">Pentax</label>
</p>
<p>
<input
type="radio"
name="camera"
id="others"
value="其它">
<label
for="others">others</label>
</p>
<p>
<input
type="submit"
name="btnSubmit"
id="btnSubmit"
value="Submit"
class="btn">
</p>
<p>
<input
type="button"
value="检测选中对象"
onclick="getChoice()">
<input
type="button"
value="设置为Canon"
onclick="setChoice(0)">
</p>
</form>