js仿百度音乐全选操作
作者：光明大神棍 发布时间：2024-04-18 10:03:41
标签：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>
0
投稿猜你喜欢
- 关于python中的二维数组，主要有list和numpy.array两种。好吧，其实还有matrices，但它必须是2维的，而numpy a
PHP attributes() 函数实例返回 XML 的 body 元素的属性和值：<?php $note=<<<- 使用python批量修改文本文件编码格式把文本文件的编码格式进行批量幻化，比如ascii， gb2312， utf8等，相互转化，字符集的大
- 之前上传图片都是直接将图片转化为io流传给服务器，没有用框架传图片。最近做项目，打算换个方法上传图片。Android发展到现在，Okhttp
- 我们平时导入第三方模块的时候，一般使用的是 import 关键字，例如：import scrapyfrom scrapy.spider im
- 当我们在使用Pycharm时，总是会建立多个项目文件，但是分别打开每个项目文件会很麻烦，接下来看在Project Files下如何创建多个项
- 项目开发中hadoop一直装在虚拟机上，最近要迁移到服务器上。记录下迁移过程。一、为虚拟机添加一块新的硬盘虚拟机的初始硬盘只有30G，容不开
- 本文实例为大家分享了js+ajax分页组件的具体代码，供大家参考，具体内容如下1.定义分页组件DOM<div id="pag
- 将一个列表传入函数后，会对这个列表本身产生什么改变？这就是本文主要考察的内容。list = [1,2,3,4,5,6,7]word = li
- 元素是文档结构的基础，在CSS中，每个元素生成了一个包含了元素内容的框（box，也译为“盒子”）。但是不同的元素显示的方式会有所不同，例如&
- Matplotlib配置了配色方案和默认设置，主要用来准备用于发布的图片。有两种方式可以设置参数，即全局参数定制和rc设置方法。查看matp
- MySQL分页分析原理及提高效率PERCONA PERFORMANCE CONFERENCE 2009上，来自雅虎的几位工程师带来了一篇”E
- 基本映射映射使用在根据不同URLs请求来产生相对应的返回内容.Bottle使用route() 修饰器来实现映射.from bottle im
- 1 简介kepler.gl作为开源地理空间数据可视化神器，也一直处于活跃的迭代开发状态下。而在前不久，kepler.gl正式发布了其2.4.
- 本文实例为大家分享了树回归的具体代码，供大家参考，具体内容如下#-*- coding:utf-8 -*- #!/usr/bin/python
- Facebook的网站速度做为最关键的公司任务之一。在2009年，我们成功地实现了Facebook网站速度提升两倍 。而正是我们的工程师团队
- IE>6 及其它浏览器不在此文论述范围内。img 的 onload 事件，是当图片加载完成之后，就处触发。img.complete 这
- 在使用Python处理数据时，经常需要对数据筛选。这是在对时间筛选时，判断两列时间是否相差一年，如果是，则返回符合条件的所有列。data原始
- rabbitmq中文翻译的话，主要还是mq字母上：Message Queue，即消息队列的意思。前面还有个rabbit单词，就是兔子的意思，
- 一、背景我们在进行代码调试时，通常使用两种方式。print 输出调试的内容或者标识通过断点调试debug但是我想知道代码的中间的每一行程序运
