js仿百度音乐全选操作
更新时间：2017年01月13日 08:44:18 作者：光明大神棍
这篇文章主要为大家详细介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本篇文章主要是对JS获取地址栏参数的几种方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
这篇文章主要为大家详细介绍了基于MVC方式实现三级联动的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
这篇文章主要介绍了js判断某个方法是否存在的实例代码,可用于检测js中的方法是否可用,具有一定参考借鉴价值,需要的朋友可以参考下2015-01-01
iFrame小应用2008-12-12
第一次提交可以，第二次提交就没有任何响应了。需要重新加载页面后才可以提交，而这个问题在Firefox,IE下没有出现。2011-05-05
这篇文章主要为大家详细介绍了JavaScript实战之带收放动画效果的导航菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要介绍了js下省份级联效果，需要的朋友可以参考一下2013-06-06
这篇文章主要为大家详细介绍了前端JavaScript实现大数据前后模糊搜索的四个常见方法,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下2023-12-12
这篇文章主要介绍了javascript自定义日期比较函数用法,涉及javascript日期相关转换、运算操作技巧,需要的朋友可以参考下2019-07-07
在做数据交互的时候,我们经常需要判断数据或者对象是不是为空,避免当接口异常时候前端页面崩溃,下面这篇文章主要给大家介绍了关于JS判断空对象的几个方法,需要的朋友可以参考下2022-02-02
最新评论