js实现多选

    span {
        width: 100px;
        text-align: center;
        line-height: 30px;
        border: 1px solid #ddd;
        background-color: #eee;
        display: inline-block;
    }

    .active {
        border: 1px solid red;
        color: red
    }


爱好：
<span>吃饭</span>
<span>睡觉</span>
<span>打豆豆</span>

<script>
    var btns = document.querySelectorAll('span');
    console.log(btns);
    // 绑定点击事件
    for (var i = 0; i < btns.length; i++) {
        btns[i].onclick = function () {
            if (this.getAttribute('class') == 'active') {
                this.setAttribute('class', '')
            } else {
                this.setAttribute('class', 'active')
            }

        }
    }
</script>