程序一：(全選)
1 <html xmlns="http://www.w3.org/1999/xhtml" >
2 <head>
3 <title>標題頁</title>
4 <SCRIPT LANGUAGE="JavaScript">
5 function checkAll(str)
6 {
7 var a = document.getElementsByName(str); //獲取所有復選框
8 var n = a.length; //獲取復選框的個數
9 for (var i=0; i<n; i++)
10 a[i].checked = window.event.srcElement.checked;//通過單擊的按鈕判斷是選中還是未選
11 }
12 </script>
13 </head>
14 <body>
15 <input type=checkbox name=All onclick="checkAll('ck')"/>全選<br>
16 <input type=checkbox name=ck />體育<br>
17 <input type=checkbox name=ck />旅游<br>
18 <input type=checkbox name=ck />飲食<br>
19 <input type=checkbox name=ck />影視<br>
20 <input type=checkbox name=ck />音樂<br><br></body>
21 </html>
22
程序二：(全選)
1 <html xmlns="http://www.w3.org/1999/xhtml" >
2 <head>
3 <title>標題頁</title>
4 </head>
5 <body>
6 <form id="form1" name="form1" method="post" action="">
7 <table width="120" border="0">
8 <tr>
9 <td>教師組/學生組</td>
10 </tr>
11 <tr>
12 <td><input name="check" type="checkbox" id="check" value="yes" />
13 <input name="nocheck" type="checkbox" id="nocheck" value="no" /></td>
14 </tr>
15 <tr>
16 <td><input name="check" type="checkbox" id="Checkbox1" value="yes" />
17 <input name="nocheck" type="checkbox" id="Checkbox2" value="no" /></td>
18 </tr>
19 <tr>
20 <td><input name="check" type="checkbox" id="Checkbox3" value="yes" />
21 <input name="nocheck" type="checkbox" id="Checkbox4" value="no" /></td>
22 </tr>
23 <tr>
24 <td><input name="check" type="checkbox" id="Checkbox5" value="yes" />
25 <input name="nocheck" type="checkbox" id="Checkbox6" value="no" /></td>
26 </tr>
27 <tr>
28 <td><input name="check" type="checkbox" id="Checkbox7" value="yes" />
29 <input name="nocheck" type="checkbox" id="Checkbox8" value="no" /></td>
30 </tr>
31 <tr>
32 <td><input name="check" type="checkbox" id="Checkbox9" value="yes" />
33 <input name="nocheck" type="checkbox" id="Checkbox10" value="no" /></td>
34 </tr>
35 <tr>
36 <td><input name="check" type="checkbox" id="Checkbox11" value="yes" />
37 <input name="nocheck" type="checkbox" id="Checkbox12" value="no" /></td>
38 </tr>
39 <tr>
40 <td>全選教師
41 <input name="checkall" type="checkbox" id="checkall" value="checkbox" onclick="change(document.getElementsByName('check'), this.checked)" /></td>
42 </tr>
43 <tr>
44 <td>全選學生
45 <input name="nocheckall" type="checkbox" id="nocheckall" value="checkbox" onclick="change(document.getElementsByName('nocheck'), this.checked)" /></td>
46 </tr>
47 </table>
48 </form>
49 <script type="text/javascript">
50 var change = function (chkArray, val)
51 {
52 for (var i = 0 ; i < chkArray.length ; i ++) //遍歷指定組中的所有項
53 chkArray[i].checked = val; //設置項為指定的值-是否選中
54 }
55 </script>
56 </body>
57 </html>
58
程序三：(全選)
1 <html xmlns="http://www.w3.org/1999/xhtml" >
2 <head>
3 <title>全選</title>
4 <script type="text/javascript">
5 function SelectAll()
6 {
7 oEl = event.srcElement; //獲取當前單擊的元素
8 for(i = 0;i < document.all.length; i++)
9 {
10 // 遍歷所有的checkbox
11 if(document.all(i).id.indexOf("Checkbox") != -1)
12 {
13 if(oEl.checked) //如果選擇了全選
14 document.all(i).checked = true; //全選
15 else
16 document.all(i).checked = false; //全不選
17 }
18 }
19 }
20 </script>
21 </head>
22 <body>
23
24 <input id="Checkbox1" type="checkbox" value="a" /><label >爭取舉辦奧運會的城市</label><br />
25 <input id="Checkbox2" type="checkbox" value="b"/><label >舉辦過奧運會的城市</label><br />
26 <input id="Checkbox3" type="checkbox"value="c" /><label >成功舉辦奧運會的城市</label><br />
27 <input id="Checkbox4" type="checkbox" value="d" /><label >亞洲舉辦過奧運會的城市</label><br />
28 <input id="Checkbox5" type="checkbox" onclick="SelectAll()"/>全選或全不選
29 </body>
30 </html>
程序四：(多選)
1 <html xmlns="http://www.w3.org/1999/xhtml" >
2 <head>
3 <title>標題頁</title>
4 <Script Language="javascript">
5 function selectV(obj)
6 {
7 try{
8 var oTd = obj.parentElement; //獲取表格的列
9 var oTr = oTd.parentElement; //獲取表格的行
10 var oTable = oTr.parentElement; //獲取表格
11 var oTd_Answer = oTable.rows[oTr.rowIndex-1].cells[0].innerText; //獲取問題答案所在的單元格內容
12 var oBegin = oTd_Answer.indexOf("（") + 1; //獲?。ㄋ诘奈恢?/span>
13 var str = '';
14 for(var i=0;i<oTd.children.length;i++){ //遍歷問題選項
15 if(oTd.children[i].tagName=='INPUT' && oTd.children[i].checked){//如果選中
16 str += oTd.children[i].value; //輸出value值
17 }
18 } //輸出結束符號）
19 oTable.rows[oTr.rowIndex-1].cells[0].innerText = oTd_Answer.substring(0,oBegin) + str + '）';
20 }catch(error){
21 window.alert(error.description); //顯示錯誤信息
22 }
23 }
24 </Script>
25 </head>
26 <body>
27 <table>
28 <tr>
29 <td>1.你喜歡的國家（）</td>
30 </tr>
31 <tr>
32 <td>
33 <input type="checkbox" value="A" onclick="selectV(this);">A、北京<br>
34 <input type="checkbox" value="B" onclick="selectV(this);">B、東京<br>
35 <input type="checkbox" value="C" onclick="selectV(this);">C、紐約<br>
36 <input type="checkbox" value="D" onclick="selectV(this);">D、韓國
37 </td>
38 </tr>
39 <tr>
40 <td>2.你喜歡的顏色（）</td>
41 </tr>
42 <tr>
43 <td>
44 <input type="checkbox" value="A" onclick="selectV(this);">A、黑色<br>
45 <input type="checkbox" value="B" onclick="selectV(this);">B、白色<br>
46 <input type="checkbox" value="C" onclick="selectV(this);">C、紅色<br>
47 <input type="checkbox" value="D" onclick="selectV(this);">D、藍色
48 </td>
49 </tr>
50 </table></body>
51 </html>
52
posted on 2009-04-13 16:22
重慶理工小子 閱讀(3332)
評論(11) 編輯 收藏 所屬分類:
備用代碼