js复选框:全部选择,取消选择,反向选择


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
var _1500kmCom={
    contruct:function(){
        var temp={};
        
        //全部选择
        temp.select_all=function(){
            var div=document.getElementById('div_id');
            var box=div.getElementsByTagName('input');
            for(var i=0;i<box.length;i++){
                box[i].checked=true;
            }
        }
        
        //取消选择
        temp.cancel_select=function (){
            var div=document.getElementById('div_id');
            var box=div.getElementsByTagName('input');
            for(var i=0;i<box.length;i++){
                box[i].checked=false;
            }
        }
        
        //反向选择
        temp.select_unselected=function (){
            var div=document.getElementById('div_id');
            var box=div.getElementsByTagName('input');
            for(var i=0;i<box.length;i++){
                if(box[i].checked){
                    box[i].checked=false;
                }
                else{
                    box[i].checked=true;
                }
            }
        }
        return temp;
    }
};
var km=_1500kmCom.contruct();

</script>
<button type="button" onClick="km.select_all()">全部选择</button>
<button type="button" onClick="km.cancel_select()">取消选择</button>
<button type="button" onClick="km.select_unselected()">反向选择</button>

<div id="div_id">
<input type="checkbox" />aa<hr />
<input type="checkbox" />bb<hr />
<input type="checkbox" />cc<hr />
</div>

程序运行结果如下,查看demo实例