【功能说明】
最简单的可取消多选效果(以从水果篮中挑选水果为例) 【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);};
【效果展示】