当前位置:萝卜系统下载站 > 技术开发教程 > 详细页面

有效果地控制表单元素的选择方式

有效果地控制表单元素的选择方式

更新时间:2019-06-13 文章作者:未知 信息来源:网络 阅读次数:


首先,将如下的代码加入HTML的<head>...</head>之间:
<SCRIPT LANGUAGE="JavaScript">
<!--//
function checkChoice(field, i) {
if (i == 0) {
// "All" 被选中了;则将其它所有已经被选择的项目清除,即置成checked状态为false;
if (field[0].checked == true) {
for (i = 1; i < field.length; i++)
field[i].checked = false;
}
}
else {
//否则,只要其它任意项目被选中,则将ALL的选择状态(field[0])设置为false(未被选中)

if (field[i].checked == true) {
field[0].checked = false; }
}}
//-->
</script>

然后,将表单加入HTML的<body>区:

<form name=ickform method="post" action="....">
<table width="201">
<tr>
<td>你最喜欢什么课程?</td>
</tr>
<tr>
<td>
<input type=checkbox name=classes value="all" onClick="checkChoice(document.pickform.classes, 0)" checked>
All <br>
<input type=checkbox name=classes value="数学" onClick="checkChoice(document.pickform.classes, 1)">
数学<br>
<input type=checkbox name=classes value="语文" onClick="checkChoice(document.pickform.classes, 2)">
语文 <br>
<input type=checkbox name=classes value="英语" onClick="checkChoice(document.pickform.classes, 3)">
英语<br>
<input type=checkbox name=classes value="生物" onClick="checkChoice(document.pickform.classes, 4)">
生物<br>
<input type=checkbox name=classes value="历史" onClick="checkChoice(document.pickform.classes, 5)">
历史</td>
</tr>
<tr>
<td>
<input type="button" name="Button" value="Button" onClick="javascript:alert('使用时将action指向处理表单的程序!')">
</td>
</tr>
</table>
</form>

温馨提示:喜欢本站的话,请收藏一下本站!

本类教程下载

系统下载排行

网站地图xml | 网站地图html