新手自学javascript（一）：全选效果。

　　刚开了博客，就写点学习心得吧。

　　document.getElementById(' ')是某个元素的id特性来获取某个指定的元素，返回的是一个对象。document.getElementById(' ') 是根据控件TAG（type属性）获取这个控件对象，返回的是一个对象数组；

　　要实现一个全选的效果，得先定义一组选项。

 1 <body>
 2 <p id="btn"><input id="hk" type="checkbox" />全选</p>
 3     <input type="checkbox"  /><br />
 4     <input type="checkbox"  /><br />
 5     <input type="checkbox"  /><br />
 6     <input type="checkbox"  /><br />
 7     <input type="checkbox"  /><br />
 8     <input type="checkbox"  /><br />
 9     <input type="checkbox"  /><br />
10 </body>

 

接下利用Javascript来实现效果。教程中的效果是只能点全选时全部选中，如果再点全选就不能全部反选，这里我通过自己的理解，加入了这个功能

 1 <script type="text/javascript">    
 2 window.onload=function(){
 3     
 4     var oInput=document.getElementsByTagName('input')
 5     var ohk=document.getElementById('hk')
 6     ohk.onclick=function(){
 7         var i=0;
 8         if(ohk.checked==true){
 9         for(i=0;i<oInput.length;i++)
10         {
11             oInput[i].checked=true;
12             }
13         }
14         else
15         {
16             for(i=0;i<oInput.length;i++)
17         {
18             oInput[i].checked=false;
19             
20         }
21             
22         }
23     };
24 };
25 </script>
先获取所有type为'input '的元素，然后各全选的那个选项添加点击事件。如果全选项被经被选中，则通过循环使得每个元素的'checked'属性变为true，否则变成false.
个人感觉此种方法还是有所欠缺，他会将页面中所有的类型为input的选中.以后掌握更多的了再来修改.

posted on 2013-05-12 12:08  TopGrd  阅读(368)  评论(2)    收藏  举报

导航