最简单的可取消多选效果(以从水果篮中挑选水果为例)【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);
};
【效果展示】
最简单的可取消多选效果(以从水果篮中挑选水果为例)【jsDEMO】的更多相关文章
- 使用AngularJS实现简单:全选和取消全选功能
这里用到AngularJS四大特性之二----双向数据绑定 注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器 效果: < ...
- jQuery实现全选效果【转】
这是一段用jquery实现全选的代码,主要思路如下: 1.所有的复选框都有单击事件,所有效果都是在单击事件下实现的 2.全选复选框所实现的功能与其他复选选项实现的功能不同,所有在单击事件内做一个判断, ...
- avalon全选效果分析讲解
全选功能就是 1.点击全选控制循环元素是否选中.(点击全选,下面的所有元素选中,再次点击 所有元素取消选中.) 2.点击循环元素控制全选.(如果当前元素是未选中状态则全选不选中,如果当前元素是选中状态 ...
- DataGridView取消默认选中行
DataGridView在添加数据后会默认选中第 一个单元格或者第一行,我就想取消它的默认选中行.在DataGridView绑定数据之后加上了ClearSelection().这样一来,不论是启动窗体 ...
- jquery checkbox勾选取消勾选的诡异问题
jquery checkbox勾选/取消勾选的诡异问题jquery checkbox勾选/取消勾选的诡异问题 <form> 你爱好的运动是?<input type=&q ...
- jQuery--checkbox全选/取消全选
用JavaScript使页面上的一组checkbox全选/取消全选,逻辑很简单,实现代码也没有太难的语法.但使用jQuery实现则更简单,代码也很简洁,精辟! jQuery版本:1.3.2 <h ...
- vue实现全选效果
vue实现全选效果 接触vue快半年了,记得刚用vue做项目的时候遇到一个全选功能,当时到处百度也没有找到怎么实现,最后还是用了jquery进行dom操作实现的. 今天没事就顺手写了一个,感觉很简单, ...
- AngularJS--购物车全选/取消全选功能实现
刚学习angularJS,于是练习写了一个类似于购物车的全选/取消全选的功能,主要实现的功能有: 1.勾选全选checkbox,列表数据全部被勾选,取消同理,用ng-model实现双向绑定: 2.选中 ...
- react实现全选、取消全选和个别选择
react里面实现全选和取消全选,个别选择等操作,效果如下 代码: import React, {Component} from 'react' export default class Demo e ...
随机推荐
- 学习django之构建Web是Meta嵌套类的几处使用
Django中meta嵌套类的使用 1.模型中使用嵌套类 在定义抽象模型时如: class Meta : abstract=true 用来指明你创建的模型是一个抽象基础类的模型继承. 2.在一个对象对 ...
- c#编程指南(十) 平台调用P-INVOKE完全掌握, 字符串和指针
可以说新手使用P-INVOKE最开始的头疼就是C#和C++的字符串传递,因为这里涉及到两个问题. 第一:C#的string和C++的字符串首指针如何对应. 第二:字符串还有ANSI和UNICODE(宽 ...
- python easy_install pip django
1. install python (2.7.8) 2. set PATH, add python27 3. python easy_install.py 4. easy_install pip 5. ...
- word 多级列表设置
今天写论文碰到了这个问题, 希望能出现这样的效果: 第一章 1.1 1.2 第二章 2.1 2.2 ...... 为了达到这个效果,晕死了.因为我的标题不是普通的默认标题一标题二 比如同济一标题 ...
- 实现IBatisNet的Dialect分页
Hibernate有其独有的Dialect,对不同的数据库实现sql的分页. 用过MyBatis for Java,它可以拦截SQL语句,通过Interceptor对原始的sql语句进行修改,也就是可 ...
- Android 自定义View 三板斧之二——组合现有控件
通常情况下,Android实现自定义控件无非三种方式. Ⅰ.继承现有控件,对其控件的功能进行拓展. Ⅱ.将现有控件进行组合,实现功能更加强大控件. Ⅲ.重写View实现全新的控件 上文说过了如何继承现 ...
- google搜索技巧汇总
由于不能访问google,可访问ggso.in进行搜索. 简单整理记录一下常用的一些Google搜索技巧:或操作一般搜索时,如果输入多个词,默认是与的关系,如输入词1和词2,即搜索同时包含词1和词2的 ...
- 在GitHub注册账户的过程
(1)第一步:首先起一个属于自己用户的名字(username),用户名字只能包含字母数字的字符或者单个连字符,不能只用单个连字符开始或者结束(only contain alphanumeric cha ...
- 作业三:代码规范、代码复审、PSP
一.代码规范 我认为我们编写的代码都需要进行规范的操作,因为如果为了图省事情或者为了减少时间去完成这个编程.在最后检验的时候就会出现一些警告,导致你这次编程的代码出现问题,当出现问题的时候你在回头去检 ...
- Wix 安装部署教程(十) --来,用WPF做个漂亮的安装界面
在上一篇中曾留下两个问题,.Net捆绑安装不触发以及路径选择的问题现在都已经解决,这段时间花的最多的地方还是WPF调样式上面,奈何WPF功力不够,暂时还是没有达到自己想要的效果.另外ViewModel ...