當前位置:蘿卜系統下載站 > 技術開發教程 > 詳細頁面

有效果地控制表單元素的選擇方式

有效果地控制表單元素的選擇方式

更新時間: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
亚洲嫩草影院久久精品