选择

心已赠人 2022-05-18 02:38 111阅读 0赞

<!doctype html>
    
    <html>
    
    <head>
    
    <meta charset="utf-8">
    
    <title>demo</title>
    
    <style>
    
    *{margin:0;padding:0;list-style:none;}
    
    ul{
    
    border:1px solid #000;
    
    border-bottom:none;
    
    }
    
    li{
    
    height:30px;
    
    line-height:30px;
    
    border-bottom:1px solid #000;
    
    }
    
    .in{
    
    background:#ccc !important;
    
    }
    
    </style>
    
    <script>
    
    window.onload =function(){
    
    var oList =document.getElementById('list');
    
    var aLi =oList.getElementsByTagName('li');
    
    var aInp = oList.getElementsByTagName('input');/*li里面的所有input元素*/
    
    var oAll = document.getElementById('all');
    
    var oAllInp = oAll.getElementsByTagName('input');/*div里面的所有的input元素*/
    
    var num =0;
    
    var len = aLi.length;
    
    
    
    for(var i =0;i<aLi.length;i++){
    
    if(i%2==0){
    
    aLi[i].style.background ='pink'/*隔行变色*/
    
    }
    
    aLi[i].onmouseover = function(){/*鼠标经过*/
    
    this.className = 'in'
    
    }
    
    aLi[i].onOff = true;
    
    aLi[i].onmouseout = function(){/*鼠标离开*/
    
    if(this.onOff){
    
    this.className=''
    
    }
    
    }
    
    
    
    aInp[i].index = i;
    
    aInp[i].onclick = function(){
    
    if(this.checked){
    
    num++;
    
    if(num==len){/*判断如果勾选全部的时候，全选框就true*/
    
    oAllInp[0].checked = true;
    
    }
    
    aLi[this.index].onOff = false;
    
    }else{
    
    /*只要有一个没被选中全选框就false*/
    
    num--;
    
    oAllInp[0].checked = false;
    
    aLi[this.index].onOff = true;
    
    }
    
    }
    
    }
    
    /*全选*************************************/
    
    oAllInp[0].onclick = function(){
    
    if(this.checked){/*如果全选框true，*/
    
    num =len;
    
    for(var i=0;i<len;i++){
    
    aInp[i].checked = true;
    
    aLi[i].checked = false;
    
    aLi[i].className='in'
    
    }
    
    }else{
    
    num =0;
    
    for(var i=0;i<len;i++){
    
    aInp[i].checked = false;
    
    aLi[i].checked = true;
    
    aLi[i].className=''
    
    }
    
    }
    
    }
    
    /*反选*************************************/
    
    oAllInp[1].onclick = function(){
    
    for(var i=0;i<len;i++){
    
    aInp[i].checked = !aInp[i].checked;
    
    aLi[i].onOff = !aLi[i].onOff;
    
    if(aLi[i].onOff){
    
    aLi[i].className =''
    
    }else{
    
    aLi[i].className = 'in'
    
    }
    
    }
    
    num =len-num
    
    }
    
    
    
    
    
    
    
    
    
    }
    
    </script>
    
    </head>
    
    
    
    <body>
    
    <ul id="list">
    
    <li>
    
    <input type="checkbox"/>
    
    <span>名字名字</span>
    
    </li>
    
    <li>
    
    <input type="checkbox"/>
    
    <span>名字名字</span>
    
    </li>
    
    <li>
    
    <input type="checkbox"/>
    
    <span>名字名字</span>
    
    </li>
    
    <li>
    
    <input type="checkbox"/>
    
    <span>名字名字</span>
    
    </li>
    
    <li>
    
    <input type="checkbox"/>
    
    <span>名字名字</span>
    
    </li>
    
    </ul>
    
    <div id="all">
    
    <input type="checkbox"/>全选
    
    <input type="checkbox"/>反选
    
    </div>
    
    </body>
    
    </html>