js仿百度音乐全选操作

2019-11-19 17:57:59

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了js全选操作的具体代码，供大家参考，具体内容如下

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>*{margin:0;padding:0;}ul{list-style:none;}#content{width:300px;border:1px solid #ccc;margin:20px auto;}#content ul{width:300px;}#content ul li,#content div{width:300px;height:50px;line-height:50px;border-bottom:1px dotted #ccc;text-indent:20px;}#content ul li:nth-child(odd) {background:#f1f1f1;}#content ul li.active,#content ul li:hover{background:#99FFCC;}</style><script>window.onload = function () {  var oDiv = document.getElementById('content');  var checkAll = document.getElementById('checkAll');  var aLi = oDiv.getElementsByTagName('li');  var aInput = oDiv.getElementsByTagName('input');  for ( var i = 0; i < aInput.length; i++ ) {    aInput[i].index = i;    aInput[i].onclick = function () {      aLi[this.index].className = this.checked ? 'active' : '';    }  }  checkAll.onclick = function () {    for ( var i = 0; i < aInput.length; i++ ) {      if(!aInput[i].checked) aInput[i].checked = true;      aLi[i].className = 'active';    }  }}</script></head><body><div id="content">  <ul>    <li>      <input type="checkbox"/>      <span>私奔</span>      <span>梁博</span>    </li>    <li>      <input type="checkbox"/>      <span>北京</span>      <span>杜甫</span>    </li>    <li>      <input type="checkbox"/>      <span>花人</span>      <span>李白</span>    </li>    <li>      <input type="checkbox"/>      <span>神话</span>      <span>光良</span>    </li>    <li>      <input type="checkbox"/>      <span>神话</span>      <span>光良</span>    </li>    <li>      <input type="checkbox"/>      <span>神话</span>      <span>光良</span>    </li>    <li>      <input type="checkbox"/>      <span>神话</span>      <span>光良</span>    </li>    <li>      <input type="checkbox"/>      <span>神话</span>      <span>光良</span>    </li>    <li>      <input type="checkbox"/>      <span>神话</span>      <span>光良</span>    </li>  </ul>  <div>    <input id="checkAll" type="checkbox" />全选  </div></div></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：js实现淡入淡出轮播切换功能

下一篇：js实现tab选项卡切换功能