JavaScript基础 案例 全选、反选
2018-01-22 本文已影响0人
0说
<style type="text/css">
/*清除样式*/
*{margin: 0;padding: 0;}
ul li{list-style-type: none;}
a{text-decoration: none; color: inherit;}
/*---------------------------------------------------*/
.wrap{
width: 600px;
margin: 100px auto;
font-size: 14px;
}
.wrap ul li{
width: 100%;
height: 35px;
margin-bottom: 1px;
background: yellow;
line-height: 35px;
text-indent: 10px;
}
.wrap ul li a{
display: inline-block;
width: 20px;
height: 20px;
margin-right: 5px;
border: 1px solid white;
background: url('images/ck.png') no-repeat center/cover;
vertical-align: -4px;
}
.wrap ul li:nth-child(3n-1){
background: #ff0000;
}
.wrap ul li:nth-child(3n){
background: green;
}
.wrap .ckbox{
margin-top: 15px;
padding-left: 10px;
}
.wrap .ckbox:after{
content: '';
display: block;
clear: both;
}
.wrap .ckbox span{
float: left;
line-height: 20px;
cursor: pointer;
}
.wrap .ckbox span:first-child{
width: 60px;
height: 20px;
margin-right: 10px;
background: url('images/ck.png') no-repeat;
text-indent: 25px;
}
.wrap .ckbox span.on,
.wrap ul li a.on{
background-image: url('images/cked.jpg');
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li><a href="javascript:;"></a>你好你好</li>
<li><a href="javascript:;"></a>你好你好</li>
<li><a href="javascript:;"></a>你好你好</li>
<li><a href="javascript:;"></a>你好你好</li>
<li><a href="javascript:;"></a>你好你好</li>
<li><a href="javascript:;"></a>你好你好</li>
<li><a href="javascript:;"></a>你好你好</li>
<li><a href="javascript:;"></a>你好你好</li>
<li><a href="javascript:;"></a>你好你好</li>
<li><a href="javascript:;"></a>你好你好</li>
<li><a href="javascript:;"></a>你好你好</li>
<li><a href="javascript:;"></a>你好你好</li>
</ul>
<div class="ckbox">
<span>全选</span>
<span>反选</span>
</div>
</div>
<script type="text/javascript">
var oWrap = document.getElementsByClassName( 'wrap' )[0],
aBtn = oWrap.getElementsByTagName( 'a' ),
aCk = oWrap.getElementsByTagName( 'span' ),
bool = true,
length = aBtn.length,
num = 0;
for(var i=0 ; i<length ; i++){
aBtn[i].onclick = function (){
var tList = this.classList;
if( tList.contains( 'on' ) ){
tList.remove( 'on' );
num --;
} else {
tList.add( 'on' );
num ++ ;
}
aCk[0].classList[ num=== length ? 'add' : 'remove']( 'on' );
}
}
//全选
aCk[0].onclick = function (){
var tList = this.classList;
tList.toggle( 'on' );
if( tList.contains('on') ){
for( i=0 ; i<length ; i++ ){
aBtn[i].classList.add( 'on' );
num = 12;
}
} else {
for( i=0 ; i<length ; i++ ){
aBtn[i].classList.remove( 'on' );
num = 0;
}
}
}
//反选
aCk[1].onclick = function (){
num = length - num;
for(i=0 ; i<length ; i++ ){
// aBtn[i].classList[ aBtn[i].classList.contains( 'on' ) ? 'remove' : 'add']( 'on' );
var aList = aBtn[i].classList;
aList[ aList.contains( 'on' ) ? 'remove' : 'add']( 'on' );
}
aCk[0].classList[ num=== length ? 'add' : 'remove']( 'on' );
}
//点击选中
// for(var i=0 ; i<length ; i++){
// aBtn[i].onclick = function (){
// var tcn = this.className;
// if( tcn === 'on'){
// this.className = '';
// num -- ;
// } else{
// this.className = 'on';
// num ++ ;
// }
// aCk[0].className = num === length ? 'on' : '';
// }
// }
// //全选
// aCk[0].onclick = function (){
// if( this.className === ''){
// this.className = 'on';
// for( i=0 ; i<length ; i++){
// if( aBtn[i].className === '' ){
// aBtn[i].className = 'on';
// num = 12;
// }
// }
// } else{
// this.className = '';
// for( i=0 ; i<length ; i++){
// aBtn[i].className = '';
// num = 0;
// }
// }
// }
// //反选
// aCk[1].onclick = function (){
// num = length - num;
// for(i=0 ; i<length ; i++ ){
// aBtn[i].className = aBtn[i].className === '' ? 'on' : '';
// }
// aCk[0].className = num === length ? 'on' : '';
// }
</script>
知识点
classList:返回class里的所有值：类数组； （不兼容IE8及以下）
classList.add( ' ' ) 加入，加入某个类名；
classList.remove( ' ' ) 移除，移除某个类名；
classList.toggle( ' ' ) 切换类名（有则删，没有则加）
例：
<div class = 'a b c d'></div>
var aDiv = document.getElementsByTagName( 'div' )[0];
console.log( aDiv.classList );
弹出：a b c d
移除a b
aDiv.classList.remove( 'a' , 'b' );
移除a
aDiv.classList.remove( 'a' );
加入
aDiv.classList.add( 'a' );
contains() 判断是否有某个类名，返回一个布尔值
<div class = 'a b c d'></div>
var aDiv = document.getElementsByTagName( 'div' )[0];
alert( aDiv.classList.contains( 'a' ) );
判断class里有没有a,有的话返回true 没有返回false;
if....else...高级操作
例：
if ( bool ){
obj.classList.add( 'on' );
} else {
obj.classList.remove( 'on' );
}
高级写法
1、可看成
if ( bool ){
obj.classList[ 'add' ]( 'on' );
} else {
obj.classList[ 'remove' ]( 'on' );
}
2、三目写法
obj.classList[ bool ? 'add' : 'remove' ]( 'on' );
另一种写法：
var x = bool ? 'add' : 'remove';
obj.classList[ x ]( 'on' );
