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 相关文章推荐
JS类中定义原型方法的两种实现的区别
Mar 08 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
May 17 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
浅析jQuery EasyUI中的tree使用指南
Dec 18 Javascript
JavaScript暂停和继续定时器的实现方法
Jul 18 Javascript
JavaScript严格模式详解
Jan 16 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
Feb 15 Javascript
JS+DIV实现的卷帘效果示例
Mar 22 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
Apr 28 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
js设置默认时间跨度过程详解
Jul 17 Javascript
详解uniapp的全局变量实现方式
Jan 11 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
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
php去掉文件前几行的方法
2015/07/29 PHP
AES加解密在php接口请求过程中的应用示例
2016/10/26 PHP
PHP重定向与伪静态区别
2017/02/19 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
Smarty模板语法详解
2019/07/20 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
javascript 建设银行登陆键盘
2008/06/10 Javascript
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
JavaScript中URL编码函数代码
2011/01/11 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
js弹出div并显示遮罩层
2014/02/12 Javascript
html的DOM中document对象images集合用法实例
2015/01/21 Javascript
跟我学习javascript的循环
2015/11/18 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
2017/04/11 jQuery
es6在react中的应用代码解析
2017/11/08 Javascript
基于input动态模糊查询的实现方法
2017/12/12 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
Python读取一个目录下所有目录和文件的方法
2016/07/15 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
解决Firefox下不支持outerHTML问题代码分享
2014/06/04 HTML / CSS
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
人力资源经理的岗位职责范本
2014/02/28 职场文书
物流管理专业毕业生自荐信
2014/03/04 职场文书
建议书的格式
2014/05/12 职场文书
代收款委托书范本
2014/10/01 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
python实现Thrift服务端的方法
2021/04/20 Python
MySQL5.7并行复制原理及实现
2021/06/03 MySQL
Python实现滑雪小游戏
2021/09/25 Python