原生js全选反选（原创）

Html

Css

* {
	margin:0;
	padding:0;
	font-family:Microsoft YaHei,serif;
}
li {
	list-style:none;
}
.wrap {
	width:450px;
	padding:20px 0;
	margin:50px auto;
	border:solid 1px #ccc;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}
.list {
	width:100%;
	height:auto;
	overflow:hidden;
}
.list li {
	width:100%;
	height:60px;
	line-height:60px;
	font-size:20px;
	color:#fff;
	border-bottom:solid 2px #fff;
}
li .w-left,.list li .w-right {
	display:inline-block;
}
.list li .w-left,.a-left {
	position:relative;
	float:left;
	width:40px;
	height:60px;
	text-align:center;
	cursor:pointer;
}
.a-check {
	width:100%;
	height:60px;
	line-height:60px;
	font-size:18px;
	color:#fff;
	background-color:#CC66CC;
	border-bottom:solid 2px #fff;
}
.a-check img {
	margin-left:11px;
	margin-right:10px;
}
.a-check:hover {
	background-color:#386;
}
.w-left img,.a-check img {
	vertical-align:middle;
}

/**Created by by_shmily */

var list = document.querySelectorAll(".list li"),          //获取li列表结合
        len = list.length,                                    //获取li的长度
        arr = ["#CC6633","#CC6666","#CC6699"],               //数组存背景颜色值
        img = document.querySelectorAll(".w-left img"),      //复选框图片
        arrImg = ["http://www.jq22.com/tp/8a6efa93-ac4b-43e2-9b23-35abfde0f9b8.png","http://www.jq22.com/tp/6019dd19-1148-439b-82cf-2bd1941aec69.png"],      //存储复选框的两种状态路径
        allCk = document.querySelectorAll(".a-check img"),  //获取全选按钮的操作权限
        num = 0 ;                //计数，记录当前选中了几个，默认num=0代表一个都没有选中；后边判断全选的时候，会用得到

//各行变色
        for(var i=0;i<len;i++){
            list[i].style.backgroundColor = arr[i % arr.length] ;  //对存放背景色的数组取模，实现隔行变色
        }
        //鼠标经过改变li的背景颜色
        for(var i=0;i<len;i++){
            list[i].index = i ;
            list[i].originalC=list[i].style.backgroundColor;
            list[i].onmouseenter = function () {
                list[this.index].style.backgroundColor = "#386" ;
            }
            list[i].onmouseleave = function () {
                list[this.index].style.backgroundColor = list[this.index].originalC ;
            }
        }

//单击事件
        for(var i=0;i<len;i++){
            img[i].num = i ;
            img[i].mark = false ; //默认没有选中
            img[i].onclick = function () {
                if(this.mark){
                    img[this.num].src = arrImg[0] ;  //改变图片路径
                    num-- ;  //计数器自减
                }else {
                    img[this.num].src = arrImg[1] ;  //改变图片路径
                    num++ ;  //计数器自增
                }
                this.mark = !this.mark ;   //改变选中状态
                isNum();
            }
        }
        //全选事件
        allCk[0].onclick = function () {
            num = len;
            this.src = arrImg[1] ;
            allCk[1].src =  arrImg[0] ;
            for(var i=0;i<len;i++){
                if(img[i].mark === false){
                    img[i].src = arrImg[1] ;  //改变图片路径
                    img[i].mark = true ; //改变状态
                }
            }
        }
        //全不选事件
        allCk[1].onclick = function () {
            num = 0;
            this.src = arrImg[1] ;
            allCk[0].src =  arrImg[0] ;
            for(var i=0;i<len;i++){
                if(img[i].mark === true){
                    img[i].src = arrImg[0] ;  //改变图片路径
                    img[i].mark = false ; //改变状态
                }
            }
        }

//反选事件
        allCk[2].onclick = function () {
            for(var i=0;i<len;i++){
                if(img[i].mark === true){  //选中变不选中
                    img[i].src = arrImg[0] ;
                    num--;
                }else {  //不选中变选中
                    img[i].src = arrImg[1] ;
                    num++;
                }
                img[i].mark = !img[i].mark ;
                isNum();
            }
        }

function isNum() {
            //判断全选和全不选
            switch (num){
                case len :
                    allCk[0].src = arrImg[1] ;
                    break ;
                case 0 :
                    allCk[1].src = arrImg[1] ;
                    break ;
                default :
                    allCk[0].src = arrImg[0] ;
                    allCk[1].src = arrImg[0] ;
            }
        }

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

原生js全选反选（原创）

代码描述：原生js写的全选、全不选和反选特效

样式易修改，js简洁明了，注释全面，如果还有不懂的可以发e-mail：2292269685@qq.com

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

ξ半粒糖，甜到伤ξ

相关代码

原生js全选反选（原创）

最新