JavaScript全选、反选复选按钮的实现代码

发布时间:2020-10-31编辑:脚本学堂
本文介绍下,javascript实现的全选、反选复选按钮的一个代码,有需要的朋友,参考下吧。

原理分析:
在一张图片上做一个onclick事件,调用javascript函数,做到全选、反选、不选form中的checkbox

js代码:
  

复制代码 代码示例:
  <script language="javascript"> 
    function checkAll(form1,status){             
        var elements = form1.getElementsByTagName('input'); 
        for(var i=0; i<elements.length; i++){ 
            if(elements[i].type == 'checkbox'){ 
                if(elements[i].checked==false){ 
                    elements[i].checked=true; 
                } 
            } 
        }    
    } 
    function switchAll(form1,status){            
        var elements = form1.getElementsByTagName('input'); 
        for(var i=0; i<elements.length; i++){ 
            if(elements[i].type == 'checkbox'){ 
                if(elements[i].checked==true){ 
                    elements[i].checked=false; 
                }else if(elements[i].checked==false){ 
                    elements[i].checked=true; 
                } 
            } 
        }    
    } 
    function uncheckAll(form1,status){   
        var elements = form1.getElementsByTagName('input');      
        for(var i=0; i<elements.length; i++){                    
            if(elements[i].type == 'checkbox'){              
                if(elements[i].checked==true){                   
                    elements[i].checked=false;                   
                } 
            } 
        }    
    } //edit www.jb200.com
    </script>

然后在一个form中做三个图片来充当按钮,直接做按钮也行。
代码如下:
   

复制代码 代码示例:
<tr>
    <td colspan="12" align="center">
    <img src="images/check.jpg" onclick="checkAll(form1,status);" />         
    <img src="images/switch.jpg" onclick="switchAll(form1,status);" />        
    <img src="images/uncheck.jpg" onclick="uncheckAll(form1,status);" />
    </td>
    </tr>
 

    checkbox的数量,大家自行把握吧,根据需要多写几个也没有问题。