百度音乐全选操作

最新推荐文章于 2021-06-03 16:22:58 发布

bling'bling

最新推荐文章于 2021-06-03 16:22:58 发布

阅读量290

点赞数

本文链接：https://blog.csdn.net/weixin_44081788/article/details/97577213

版权

看了很多模拟百度音乐全选操作小例子，觉得还原度都不高，自己写了个（包括按钮的禁用啥的都满足了），一起学习
在这里插入图片描述

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   #content{margin: 100px auto;border-bottom: 2px solid black; height: 270px; width:330px;}
   ul{margin: 0; padding: 0; border-bottom: 1px solid #e1e1e1;}
   li{list-style: none;height: 40px; width: 328px; padding-left:20px ;
     font-size: 14px;}
   input{font-size: 14px;}
   span{font-size: 14px;}
   /*初始化，隔行变色*/
   #content ul li:nth-child(odd) {background:white;}/*单行白色*/
   #content ul li:nth-child(even) {background:#f7ffff;}/*双行蓝色*/
   #content ul li:hover{background:#efefef; cursor: pointer;}/*触碰变色，hover在后面*/
  </style>
  <script>
   window.onload=function(){
    var ali=document.getElementsByTagName('li');
    var ain=document.getElementsByTagName('input');
    var all=document.getElementById('all');
    for(var i=0;i<ali.length;i++){
     ain[i].index=i;
     ain[i].onclick=function(){
      var oldcolor=null;
      if(this.index%2==0)
      oldcolor='white';
      else
      oldcolor='#f7ffff';
       ali[this.index].style.background = this.checked ? '#efefef' :oldcolor;
      var num=0;
      for(var k=0;k<6;k++){ 
       if(ain[k].checked){
       num++;
      }
       if(num!=6){
        ain[6].checked=false;
       }
       else{
        ain[6].checked=true;
       }
      if(num==0){
      ain[7].setAttribute('disabled',true);
      ain[8].setAttribute('disabled',true);
      ain[9].setAttribute('disabled',true);
     }else{
      unjin();
     }
      }
     }
     
    }
    
    //全选
    all.onclick=function(){
     for(var i=0;i<6;i++){
      ain[i].checked=true;
      ali[i].style.background="#efefef";
     }
     unjin();
    }
    //取消禁用
    function unjin(){
    for(var n=0;n<6;n++){
     if(ain[n].checked){
      ain[7].removeAttribute('disabled');
      ain[8].removeAttribute('disabled');
      ain[9].removeAttribute('disabled');
      break;
     }
    }
   }
   
    
   }
  </script>
 </head>
 <body>
 <div id="content">
  <ul>
   <li><input type="checkbox" />私奔&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;梁博</li>
         <li><input type="checkbox" />私奔&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;梁博</li>
         <li><input type="checkbox" />私奔&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;梁博</li>
         <li><input type="checkbox" />私奔&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;梁博</li>
         <li><input type="checkbox" />私奔&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;梁博</li>
         <li><input type="checkbox" />私奔&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;梁博</li>
  </ul>
      <input style="margin-left: 25px;" type="checkbox" id="all"/><span> 全选</span>
      <input  style="margin-left:8px;" type='button' value="❤ 收藏" disabled/>
      <input style="margin-left: 8px;"  type='button' value="➕ 添加" disabled/>
      <input style="margin-left: 8px;" type='button' value="❌  删除" disabled/>
 </div>
 </body>
</html>

bling'bling

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度音乐全选操作

看了很多模拟百度音乐全选操作小例子，觉得还原度都不高，自己写了个（包括按钮的禁用啥的都满足了），一起学习<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> #content{margin: ...
复制链接

扫一扫