js仿百度音乐全选操作


Posted in Javascript onJanuary 13, 2017

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

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 Javascript
flash 得到自身url参数的代码
Nov 15 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
Nov 22 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
May 11 Javascript
JavaScript中的slice()方法使用详解
Jun 06 Javascript
Bootstrap缩略图与警告框学习使用
Feb 08 Javascript
浅谈Node异步编程的机制
Oct 18 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 Javascript
动态加载权限管理模块中的Vue组件
Jan 16 Javascript
angular-tree-component的使用详解
Jul 30 Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 Javascript
微信小程序中网络请求缓存的解决方法
Dec 29 Javascript
js实现tab选项卡切换功能
Jan 13 #Javascript
js制作可以延时消失的菜单
Jan 13 #Javascript
原生js实现下拉框功能(支持键盘事件)
Jan 13 #Javascript
js实现自动轮换选项卡
Jan 13 #Javascript
Javascript 使用ajax与C#获取文件大小实例详解
Jan 13 #Javascript
详解angularJs中自定义directive的数据交互
Jan 13 #Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 #Javascript
You might like
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
PHP中实现汉字转区位码应用源码实例解析
2010/06/14 PHP
PHP采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
PHP 等比例缩放图片详解及实例代码
2016/09/18 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
JavaScript 克隆数组最简单的方法
2009/02/12 Javascript
jquery ui resizable bug解决方法
2010/10/26 Javascript
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
jquery统计复选框选中示例
2013/11/05 Javascript
javascript检测是否联网的实现代码
2014/09/28 Javascript
老生常谈原生JS执行环境与作用域
2016/11/22 Javascript
函数四种调用模式以及其中的this指向
2017/01/16 Javascript
js获取ip和地区
2017/03/10 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
2017/05/27 Javascript
JS实现动态添加外部js、css到head标签的方法
2019/06/05 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
python用来获得图片exif信息的库实例分析
2015/03/16 Python
python集合类型用法分析
2015/04/08 Python
Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
2016/07/11 Python
利用python爬取软考试题之ip自动代理
2017/03/28 Python
python django 实现验证码的功能实例代码
2017/05/18 Python
django实现登录时候输入密码错误5次锁定用户十分钟
2017/11/05 Python
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
详解python while 函数及while和for的区别
2018/09/07 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
世界上最大的餐具公司:Oneida
2016/12/17 全球购物
联想台湾官网:Lenovo TW
2018/05/09 全球购物
介绍一下Prototype的$()函数,$F()函数,$A()函数都是什么作用?
2014/03/05 面试题
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
优秀研究生自我鉴定
2013/12/04 职场文书
服装厂厂长职责
2013/12/16 职场文书
初中政治教学反思
2014/01/17 职场文书
离婚协议书标准格式
2014/10/04 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书