Native JS for select and reverse selection and any unselected effects

Imitation of a Baidu music of the full selection and anti-election operation.

The HTML code is as follows:

<Divclass= "box">    <ulID= "Lists">        <Li>            <inputtype= "checkbox"value="">            <span>I love you China</span>        </Li>        <Li>            <inputtype= "checkbox"value="">            <span>Beijing</span>        </Li>        <Li>            <inputtype= "checkbox"value="">            <span>Flower Fire</span>        </Li>        <Li>            <inputtype= "checkbox"value="">            <span>Come back</span>        </Li>    </ul>    <P>        <inputtype= "checkbox"value="">        <span>Select All</span>    </P></Div>

The CSS code is as follows:

<style> *{margin:0;padding:0;}Ul,li{List-style:None;margin:0;padding:0;}Li{Line-height:45px;padding:0 15px;}. Box{Border:1px solid #e5e5e5;width:200px;margin:0 Auto;}#lists{width:200px;}P{Line-height:45px;Border-top:1px solid #e5e5e5;padding:0 15px;}</style>

The JS code is as follows:

Window.onload=function(){        varOul=document.getelementbyid ("lists"); varAli=oul.getelementsbytagname ("Li"); varOp=document.getelementsbytagname ("P") [0]; varAqxuan=op.getelementsbytagname ("input") [0]; vararrcolor=["#f6f6f6", "#f0fdff"];  for(vari=0;i<ali.length;i++) {Ali[i].index=i; Ali[i].style.backgroundcolor=arrcolor[i%arrcolor.length];//all the Li interlaced colors            //mouse move into Li background dimmedAli[i].onmouseover=function(){                 This. style.backgroundcolor= "#ccc"            }; //mouse off Li background change current color valueali[i].onmouseout=function(){                 This. style.backgroundcolor=arrcolor[ This. index%Arrcolor.length]}; //Select Allaqxuan.onclick=function(){                //alert (1)                if( This. checked==true){                     for(vari=0;i<ali.length;i++){                        varAinp=ali[i].getelementsbytagname ("input") [0]; Ainp.checked=true; }                }Else{                     for(vari=0;i<ali.length;i++){                        varAinp=ali[i].getelementsbytagname ("input") [0]; Ainp.checked=false;            }                }            }; varAinp=ali[i].getelementsbytagname ("input") [0]; Ainp.onclick=function(){                if( This. checked==false){//as long as you are not selected, you must select all the choices.Aqxuan.checked=false; }Else{                    varonoff=true;//set a switch                     for(vari=0;i<ali.length;i++){                        varInp=ali[i].getelementsbytagname ("input") [0]; if(inp.checked==false) {OnOff=false;//If one is not selected, then the switch is False                        }                    }                    if(onOff) {aqxuan.checked=true; }                }            }        }    }

The code runs as follows:

Native JS for select and reverse selection and any unselected effects