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 相关文章推荐
各浏览器对click方法的支持差异小结
Jul 31 Javascript
jquery ajax同步异步的执行最终解决方案
Apr 26 Javascript
JavaScript设置首页和收藏页面的小例子
Nov 11 Javascript
Javascript对象属性方法汇总
Nov 21 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 Javascript
图文详解Javascript中的上下文和作用域
Feb 15 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
AngularJS日程表案例详解
Aug 15 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 Javascript
使用js实现单链解决前端队列问题的方法
Feb 03 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中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
PHP数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
php中session退出登陆问题
2014/02/27 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
拖动Html元素集合 Drag and Drop any item
2006/12/22 Javascript
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
2015/04/10 Javascript
JS根据生日算年龄的方法
2015/05/05 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
JS读写CSS样式的方法汇总
2016/08/16 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
浅谈微信小程序列表埋点曝光指南
2019/10/15 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
[01:46]2018完美盛典章节片——坚守
2018/12/17 DOTA
用Python编写简单的定时器的方法
2015/05/02 Python
Python创建或生成列表的操作方法
2019/06/19 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
Python实现微信翻译机器人的方法
2019/08/13 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
html5菜单折纸效果
2014/04/22 HTML / CSS
初一体育教学反思
2014/01/29 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
2015毕业生简历自我评价
2015/03/02 职场文书
婚宴领导致辞
2015/07/28 职场文书
高三物理教学反思
2016/02/20 职场文书
导游词之寿县报恩寺
2020/01/19 职场文书
nginx日志格式分析和修改
2022/04/28 Servers