你的位置:首页 > Java教程

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

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


【html代码说明】

<div id="box">  <input placeholder = "请挑选我要的水果" disabled>  <button >合上我的水果篮子</button><br>  <ul >    <li >苹果</li>    <li >葡萄</li>    <li >香蕉</li>    <li >青梅</li>    <li >桔子</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);};

 

【效果展示】

 

【源码查看】