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

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

【html代码说明】

<div class="box" id="box">

    <input class="out" placeholder = "请挑选我要的水果" disabled>

    <button class="btn">合上我的水果篮子</button><br>

    <ul class="list">

        <li class="in red">苹果</li>

        <li class="in purple">葡萄</li>

        <li class="in yellow">香蕉</li>

        <li class="in green">青梅</li>

        <li class="in orange">桔子</li>

    </ul>

</div>    

【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);

};

【效果展示】

【源码查看】