js仿百度音樂全選操作
更新時(shí)間:2017年01月13日 08:44:18 作者:光明大神棍
這篇文章主要為大家詳細(xì)介紹了js仿百度音樂全選操作,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js全選操作的具體代碼,供大家參考,具體內(nèi)容如下

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</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>
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
基于MVC方式實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)(JavaScript)
這篇文章主要為大家詳細(xì)介紹了基于MVC方式實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01
JavaScript實(shí)戰(zhàn)之帶收放動(dòng)畫效果的導(dǎo)航菜單
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)戰(zhàn)之帶收放動(dòng)畫效果的導(dǎo)航菜單,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08
JS實(shí)現(xiàn)的省份級(jí)聯(lián)實(shí)例代碼
這篇文章主要介紹了js下省份級(jí)聯(lián)效果,需要的朋友可以參考一下2013-06-06
前端JavaScript實(shí)現(xiàn)大數(shù)據(jù)前后模糊搜索的方法詳解
這篇文章主要為大家詳細(xì)介紹了前端JavaScript實(shí)現(xiàn)大數(shù)據(jù)前后模糊搜索的四個(gè)常見方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2023-12-12
JS判斷空對(duì)象的幾個(gè)方法大盤點(diǎn)
在做數(shù)據(jù)交互的時(shí)候,我們經(jīng)常需要判斷數(shù)據(jù)或者對(duì)象是不是為空,避免當(dāng)接口異常時(shí)候前端頁面崩潰,下面這篇文章主要給大家介紹了關(guān)于JS判斷空對(duì)象的幾個(gè)方法,需要的朋友可以參考下2022-02-02

