关于全选按钮和复选框只能选中其中一个的js写法

来源:互联网 发布:淘宝砍价师怎么砍价的 编辑:程序博客网 时间:2024/04/28 13:05

      在web开发中,列表页面上经常要用到全选按钮。下面是我对于全选按钮的写法:
      js代码:
                           <script type="text/javascript">
                                          function quanxuan(){
                                                 var obj = document.getElementById("checkall");//获得全选按钮对象
                                                 var list1 = document.getElementsByTagName("input");//得到页面上所有的input对象
                                                 var list2 = new Array();
                                                 //过滤出所需要全选的input对象
                                                  for(i = 0;i < list1.length; i++){
                                                           if(list1[i].name!="checkall"){
                                                                       list2.push(list1[i]);
                                                            }
                                                   }
                                                 //如果全选按钮选中,则list2集合中的input对象都选中
                                                if(obj.checked){
                                                            for(i = 0;i < list2.length; i++){
                                                                              list2[i].checked = true;
                                                            }
                                                }
                                                 //如果全选按钮未选中,则list2集合中的input对象都未选中
                                                else{
                                                            for(i = 0;i < list2.length; i++){
                                                                              list2[i].checked = false;
                                                            }
                                                 }
                                    }
  
                        </script>
      html代码:
             <table>
                            <tr>
                                   <td>列1</td>
                                   <td>列2</td>
                                   <td>列3</td>
                                   <td>列4</td>
                          </tr>
                           <tr>
                                      <td><input type="checkbox"></td>
                                      <td>1111</td>
                                       <td>1111</td>
                                      <td>1111</td>
                           </tr>
                            <tr>
                                      <td><input type="checkbox"></td>
                                     <td>1111</td>
                                     <td>1111</td>
                                     <td>1111</td>
                              </tr>
                              <tr>
                                     <td><input type="checkbox"></td>
                                     <td>1111</td>
                                      <td>1111</td>
                                     <td>1111</td>
                               </tr>
                             <tr>
                                        <td colspan="4" align="left"><input type="checkbox" onclick="quanxuan()" name="checkall" id="checkall">全选</td>
                           </tr>
     </table>
     关于以上写法的拓展:
           如果页面上除了类型为checkbox的input之外,还有其他类型的input,诸如:button、text之类的,那么var list1 = document.getElementsByTagName("input"),其中就会有我们不需要的对象。这个时候我们就

要对list1里面的对象进行过滤了。我们可以把要获取的input的范围限定在某一个div里,例如可以在table外面套一个div,id为check,再获取id为check的div这个对象,var obj 1= document.getElementById("check"),
然后在obj1这个对象里获取input对象。这样做了之后可能还有我们不需要的对象,那么还需要进一步过滤。接下来,我们可以通过input标签的名字或属性来过滤,就像上面的代码中一样,通过名字过滤,我过滤掉了全选按

钮,有需要的话,可以通过属性过滤,if(list1[i].type!="checkbox"),这就要依具体情况而定了。

       关于复选框只能选中其中一个的实现:
       js代码:
                        function checkel(obj){
                                     var l = document.getElementsByName("lateorearly");
                                     if(obj.checked){
                                                   for(i=0;i<l.length;i++){
                                                                   l[i].checked=false;//全部不选中
                                                    }
                                                    obj.checked=true;//选中相应的checkbox
                                       } 
                       }
          html代码:
                      <input type="checkbox" name="lateorearly" id="late" onclick="checkel(this)"/>迟到

                      <input type="checkbox" name="lateorearly" id="early" onclick="checkel(this)"/>早退

原创粉丝点击