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

【效果展示】

【源码查看】

时间: 2024-10-10 04:47:02

最简单的可取消多选效果(以从水果篮中挑选水果为例)【jsDEMO】的相关文章

如何实现复选框的全选和取消全选效果

如何实现复选框的全选和取消全选效果:在很多网站都有这样的功能,当点击一个全选按钮之后,所有的复选框都会被选中,再点击之后会取消全选,功能非常的人性化,可以省却很多人力,下面就简单介绍一下JS如何实现此功能,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://ww

Axure 7.0实现复选框全选和取消全选

使用Axure原型工具对产品进行设计,使用复选框来实现全选中和全取消效果,也可以利用按钮或文字做为开关来控制效果,下面主要介绍使用复选框来实现全选中和全取消效果. 1/1 首先输入复选框效果的文字,并为每个复选框建立名称,方便后期对其辨认,例如:选择你最喜欢居住的城市,建立一个全选的复选框进行全选or取消全选效果 1/2 设置全选中 1/2/1 选择全选复选框,双击(选中状态改变时),打开新增用例对话框 1/2/2  设置用例名称,设置条件判断为真 1/2/3 选择(选中),勾选需要被选中的复选

使用AngularJS实现简单:全选和取消全选功能

<!DOCTYPE html><html lang="en" ng-app="myModule5"><!--3.ng-app="myModule5"启动ng并调用模块--><head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/bootstrap.css"

jquery全选/取消全选(反选)/单选操作

使用jQuery实现一组checkbox全选/取消全选,代码很简洁. jquery版本:2.0 先看看HTML代码,很简单的操作框 </head> <body>    <div>        <input id="checkAll" type="checkbox" />全选        <input name="subBox" type="checkbox" />

原生js实现的复选框的全选和全不选效果

原生js实现的复选框的全选和全不选效果:使用jquery实现复选框的全选和全部选效果非常的简单,这里就不介绍了,具体可以参阅jQuery实现的checkbox复选框全选和全不选效果一章节,下面介绍一下如何使用原生javascript实现此效果,代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" conten

jQuery 表单应用:全选/取消全选,表单验证,网页选项卡切换

应用一:单行文本框应用 需要用到的 API focus([[data],fn])   --> 当元素获得焦点时,触发 focus 事件 blur([[data],fn])     --> 当元素失去焦点时,触发 blur 事件 <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title></ti

jQuery实现的checkbox复选框全选和全不选效果

jQuery实现的checkbox复选框全选和全不选效果:复选框的全选和全不选效果在代码中非常的常用,尤其在批量处理的需求中更是如此,下面就通过一个代码实例简单介绍一下如何实现此效果,希望能够对需要的朋友有所帮助,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http:

jquery checkbox勾选/取消勾选的诡异问题

<form> 你爱好的运动是?<input type="checkbox" id="CheckedAll" />全选/全不选<br /> <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name="items" v

jQuery实现全选效果

这是一段用jquery实现全选的代码,主要思路如下: 1.所有的复选框都有单击事件,所有效果都是在单击事件下实现的 2.全选复选框所实现的功能与其他复选选项实现的功能不同,所有在单击事件内做一个判断,是否是全选复选框的单击事件 3.如果是,则执行判断全选复选框是否选中,如果当前状态为选中,那么点击后取消勾选,同时取消所有选项的勾选,如果全选当前未选中,点击后勾选,并勾选所有 4.如果不是,说明点击的对象是出全选外的其他选项,那么就要判断当前已经勾选的选项的数量,是否等于除了全选复选框以外所有选项