shenang博客技术文档


理论不懂就实践,实践不会就学理论!

posts - 35,comments - 55,trackbacks - 0
程序一:(全选)
 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 


posted on 2009-04-13 16:22 重庆理工小子 阅读(3307) 评论(11)  编辑  收藏 所属分类: 备用代码

FeedBack:
# re: 复选框全选(多选)
2009-04-13 22:15 |

这种东西也怕忘记了?  回复  更多评论
  
# re: 复选框全选(多选)
2009-04-14 06:38 | Lucky
所谓好记性,不如烂笔头。有些基本常用的储备,等到需要用的时候直接就能用上。不过能贴上效果图的话可能效果更好。  回复  更多评论
  
# re: 复选框全选(多选)
2009-04-14 09:02 | HiMagic!
看看jQuery吧,可以帮你省很多DOM遍历的代码  回复  更多评论
  
# re: 复选框全选(多选)
2009-04-14 10:25 | 重庆理工小子
@Lucky
代码自己试一下效果图就出来了,呵呵!
不过还是感谢建议,有了效果图自己一看也就明白了,不用再做测试!  回复  更多评论
  
# re: 复选框全选(多选)
2009-04-14 10:27 | 重庆理工小子
@HiMagic!
感谢,因为是新手,所以了解甚少,再次感谢关注!  回复  更多评论
  
# re: 复选框全选(多选)
2009-04-14 10:28 | 重庆理工小子
@比
新手,感谢!可以与我一样的初学者,共享!  回复  更多评论
  
# re: 复选框全选(多选)[未登录]
2009-04-14 10:38 | -274°C
处理这种简单而又繁琐的逻辑,用JQUERY 将为你省下不少代码。  回复  更多评论
  
# re: 复选框全选(多选)
2009-04-14 11:33 | UP
学习,现在才知道有个JQUERY!呵呵!  回复  更多评论
  
# re: 复选框全选(多选)
2010-01-26 23:11 | 夏夏
谢谢 很有用  回复  更多评论
  
# re: 复选框全选(多选)
2010-08-17 18:24 | 大道至简
小弟新手,能讲讲其中的原理么?看的不是很懂耶!谢谢了!  回复  更多评论
  
# re: 复选框全选(多选)
2010-09-15 09:52 | 东风绽花
看不出全选的效果。  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: