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 相关文章推荐
javascript 类定义的4种方法
Sep 12 Javascript
jquery 关于event.target使用的几点说明介绍
Apr 26 Javascript
js实现延迟加载的方法
Jun 24 Javascript
JavaScript获取并更改input标签name属性的方法
Jul 02 Javascript
Javascript显示和隐藏ul列表的方法
Jul 15 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
Aug 26 Javascript
学习jQuey中的return false
Dec 18 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
JavaScript Canvas绘制圆形时钟效果
Aug 20 Javascript
使用cookie绕过验证码登录的实现代码
Oct 12 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
Dec 26 Javascript
浅谈Vue 数据响应式原理
May 07 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
PHP 身份证号验证函数
2009/05/07 PHP
php &amp;&amp; 逻辑与运算符使用说明
2010/03/04 PHP
php 带逗号千位符数字的处理方法
2012/01/10 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
php仿微信红包分配算法的实现方法
2016/05/13 PHP
php 基础函数
2017/02/10 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
基于jquery的不规则矩形的排列实现代码
2012/04/16 Javascript
JQuery 操作/获取table具体代码
2013/06/13 Javascript
JS 毫秒转时间示例代码
2013/09/22 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
支持移动端原生js轮播图
2017/02/16 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
2020/02/24 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
javascript实现时钟动画
2020/12/03 Javascript
[03:26]《DAC最前线》之EG经理自述DOTA2经历
2015/02/02 DOTA
Python lambda和Python def区别分析
2014/11/30 Python
Python 中 Virtualenv 和 pip 的简单用法详解
2017/08/18 Python
Python使用cx_Oracle调用Oracle存储过程的方法示例
2017/10/07 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
python的继承知识点总结
2018/12/10 Python
HTML5 canvas基本绘图之绘制线段
2016/06/27 HTML / CSS
C#基础面试题
2016/10/17 面试题
连锁酒店店长职责范本
2014/02/13 职场文书
2014优秀党员事迹材料
2014/08/14 职场文书
2014年学习全国道德模范事迹思想汇报
2014/09/15 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
纪检部部长竞选稿
2015/11/21 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书
PyQt5实现多张图片显示并滚动
2021/06/11 Python
详解Golang如何优雅的终止一个服务
2022/03/21 Golang