最簡單的可取消多選效果(以從水果籃中挑選水果為例)【jsDEMO】

小火柴的藍色理想發表於2015-09-15
JS

【功能說明】
　　最簡單的可取消多選效果(以從水果籃中挑選水果為例)


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

 

【效果展示】

 

【原始碼檢視】

相關文章