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实现多个重叠层点击切换效果的方法
Apr 24 Javascript
json实现添加、遍历与删除属性的方法
Jun 17 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
vue构建单页面应用实战
Apr 10 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
ES6中的Promise代码详解
Oct 09 Javascript
seajs中最常用的7个功能、配置示例
Oct 10 Javascript
node.js中fs文件系统目录操作与文件信息操作
Feb 24 Javascript
vue debug 二种方法
Sep 16 Javascript
Vue源码学习之关于对Array的数据侦听实现
Apr 23 Javascript
小谈angular ng deploy的实现
Apr 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 选项及相关信息函数库
2006/12/04 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
如何修改yii2.0自带的user表为其它的表
2017/08/01 PHP
javascript学习笔记(十八) 获得页面中的元素代码
2012/06/20 Javascript
javascript 获取网页标题代码实例
2014/01/22 Javascript
JavaScript插件化开发教程(六)
2015/02/01 Javascript
javascript排序函数实现数字排序
2015/06/26 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
BootStrap的Datepicker控件使用心得分享
2016/05/25 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
2016/08/11 Javascript
JavaScript实战(原生range和自定义特效)简单实例
2016/08/21 Javascript
javascript中异常处理案例(推荐)
2016/10/03 Javascript
详解在vue-cli中使用路由
2017/09/25 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
mocha的时序规则讲解
2019/02/16 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
vue中注册自定义的全局js方法
2019/11/15 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
python 通过xml获取测试节点和属性的实例
2018/03/31 Python
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
阿联酋彩妆品牌:OUD MILANO
2019/10/06 全球购物
adidas泰国官网:adidas TH
2020/07/11 全球购物
掌上明珠Java程序员面试总结
2016/02/23 面试题
英语自荐信常用语句
2013/12/13 职场文书
党建示范点实施方案
2014/03/12 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
推普周活动总结
2014/08/28 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
党员专题组织生活会发言材料
2014/10/17 职场文书
小学端午节活动总结
2015/02/11 职场文书