js仿百度音乐全选操作的实例代码

时间：2017-01-16 编辑：简简单单来源：一聚教程网

本文实例为大家分享了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';

}

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>

body>

html>

上一个： js实现tab选项卡切换功能的教程
下一个： js实现淡入淡出轮播切换功能

推荐专题

最新下载

热门教程

js仿百度音乐全选操作的实例代码

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程