最简单的可取消多选效果(以从水果篮中挑选水果为例)【jsDEMO】

[1]功能说明

[2]HTML代码说明

[3]CSS代码说明

[4]JS代码说明

[5]效果展示

[6]源码查看

【功能说明】　　最简单的可取消多选效果(以从水果篮中挑选水果为例)

【html代码说明】

【css重点代码说明】

//设置展示框中乳白色文字效果

.out{

width: 300px;

height:30px;

line-height: 50px;

padding: 10px;

text-align: center;

border: 1px solid #ccc;

border-radius: 5px;

font-size: 20px;

color: #f1ebe5;

text-shadow: 0 8px 9px #c4b59d, 0px -2px 1px #fff;

font-weight: bold;

background: linear-gradient(to bottom, #ece4d9 0%,#e9dfd1 100%);

vertical-align: middle;

}

//水果篮显示效果

.list,.list_hid{

height: 50px;

line-height: 50px;

margin-top: 20px;

overflow: hidden;

text-align: center;

background-color: #ccc;

border-radius: 10px;

transition: 500ms height;

}

//水果篮隐藏效果

.list_hid{

height: 0;

}

【js代码说明】

//获取整个盒子

var oBox = document.getElementById('box');

//获取按钮

var oBtn = oBox.getElementsByTagName('button')[0];

//获取展示框

var oOut = oBox.getElementsByTagName('input')[0];

//获取水果篮子

var oList = oBox.getElementsByTagName('ul')[0];

//获取水果篮子里面的所有水果

var aIn = oList.getElementsByTagName('li');

//给按钮绑定事件

oBtn.onclick = function(){

//若list的className为list,说明此时水果篮子处于打开状态

if(oList.className == 'list'){

//更改其className为list_hid，关闭水果篮子

oList.className = 'list_hid';

//设置文字显示为打开我的水果篮子

this.innerHTML = '打开我的水果篮子';

//此时水果篮子处于关闭状态

}else{

//更改其className为list，打开水果篮子

oList.className = 'list';

//设置文字显示为合上我的水果篮子

this.innerHTML = '合上我的水果篮子';

}

}

for(var i = 0; i < aIn.length; i++){

//给每个水果添加标记，默认为false，表示未被选中

aIn[i].mark = false;

//给每个水果添加事件

aIn[i].onclick = function(){

//当水果选中时，取消选中；当水果未选中时，将其选中

this.mark = !this.mark;

//若该水果选中，则文字颜色变为亮灰色

if(this.mark){

this.style.color = '#ccc';

//若未选中，则文字颜色为黑色

}else{

this.style.color = 'black';

}

//运行展示框函数

fnOut();

}

}

//设置展示框函数

function fnOut(){

//设置临时字符串，来存储展示框要显示的值

var str = '';

for(var i = 0; i < aIn.length; i++){

//当该水果被选中时

if(aIn[i].mark){

//将其innerHTML添加到临时字符串中

str += ',' + aIn[i].innerHTML;

}

}

//再将最开始第一个水果前的逗号去掉

oOut.value = str.slice(1);

};

【效果展示】

【源码查看】

参考阅读