复选框全选（多选）

?哭ㄋ誰庝﹖

浏览: 1786 次
性别:
来自: 厦门

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2010-12 ( 2)
更多存档...

博客分类：

JavaScript

影视体育音乐旅游 C

复选框全选（多选）
程序一：(全选)
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;                       //获取（所在的位置
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

分享到：