zoukankan      html  css  js  c++  java
  • 一个类似职位选择的二级多选

    demo:

    html:

    <div class="get-checkbox-content left">
    <span class="btn1 btn">经营管理类<span class="right">></span></span>
    <span class="btn2 btn">销售招商类<span class="right">></span></span>
    <span class="btn3 btn">采矿类<span class="right">></span></span>
    <span class="btn4 btn">冶炼加工类<span class="right">></span></span>
    <span class="btn5 btn">项目管理类<span class="right">></span></span>
    </div>

    <div class="get-checkbox-content2 left">

    <form class="checkbox_list" style="display: flex;flex-direction: column;display: none;">
    <div><input type="checkbox" class="content_checkbox" onClick="text()"><label>总经理</label></div>
    <div><input type="checkbox" class="content_checkbox" onClick="text()"><label>首席技术官</label></div>
    <div><input type="checkbox" class="content_checkbox" onClick="text()"><label>运营主管</label></div>
    <div><input type="checkbox" class="content_checkbox" onClick="text()"><label>总经理助理</label></div>
    <div><input type="checkbox" class="content_checkbox" onClick="text()"><label>其他经营管理类</label></div>
    </form>

    <form class="checkbox_list" style="display: flex;flex-direction: column;display: none;">
    <div><input type="checkbox" class="content_checkbox" onClick="text()"><label>销售总监</label></div>
    <div><input type="checkbox" class="content_checkbox" onClick="text()"><label>销售经理</label></div>
    <div><input type="checkbox" class="content_checkbox" onClick="text()"><label>电话销售</label></div>
    <div><input type="checkbox" class="content_checkbox" onClick="text()"><label>大客户经理</label></div>
    <div><input type="checkbox" class="content_checkbox" onClick="text()"><label>其他销售类</label></div>
    </form>

    <form class="checkbox_list" style="display: flex;flex-direction: column;display: none;">
    <div><input type="checkbox" class="content_checkbox" onClick="text()"><label>矿长/副矿长</label></div>
    <div><input type="checkbox" class="content_checkbox" onClick="text()"><label>总工程师</label></div>
    <div><input type="checkbox" class="content_checkbox" onClick="text()"><label>选矿工程师</label></div>
    <div><input type="checkbox" class="content_checkbox" onClick="text()"><label>采矿工程师</label></div>
    <div><input type="checkbox" class="content_checkbox" onClick="text()"><label>其他采矿类</label></div>
    </form>

    <form class="checkbox_list" style="display: flex;flex-direction: column;display: none;">
    <div><input type="checkbox" class="content_checkbox" onClick="text()"><label>冶炼工程师</label></div>
    <div><input type="checkbox" class="content_checkbox" onClick="text()"><label>机械工程师</label></div>
    <div><input type="checkbox" class="content_checkbox" onClick="text()"><label>电气工程师</label></div>
    <div><input type="checkbox" class="content_checkbox" onClick="text()"><label>铸造工程师</label></div>
    <div><input type="checkbox" class="content_checkbox" onClick="text()"><label>其他冶炼类</label></div>
    </form>

    <form class="checkbox_list" style="display: flex;flex-direction: column;display: none;">
    <div><input type="checkbox" class="content_checkbox" onClick="text()"><label>项目总监</label></div>
    <div><input type="checkbox" class="content_checkbox" onClick="text()"><label>项目经理</label></div>
    <div><input type="checkbox" class="content_checkbox" onClick="text()"><label>项目主管</label></div>
    <div><input type="checkbox" class="content_checkbox" onClick="text()"><label>项目工程师</label></div>
    <div><input type="checkbox" class="content_checkbox" onClick="text()"><label>项目工程师2</label></div>
    <div><input type="checkbox" class="content_checkbox" onClick="text()"><label>其他管理类</label></div>
    </form>
    </div>

    <script type="text/javascript">
    $(".btn").click(function() {
    $(".checkbox_list").hide();
    $(".checkbox_list").eq($(this).index()).show();
    })

    $(".content_checkbox").click(function() {
    if($(".get-checkbox").children("span").length >= 5) {
    alert("请注意!最多只能选择五种不同的短信");
    return false;
    }

    if($(this).is(':checked') == true) {
    $(".get-checkbox").append('<span style="text-align:start;">' + $(this).next().text() + '<img src="icon/close.gif" class="close"/></span>')
    } else {
    $(".get-checkbox").children("span:last-child").remove()
    }

    $(".close").click(function() {
    $(this).parent("span").remove();
    var content = $(this).parent("span").text();
    // var content = content1.substr(0, content1.length-1);
    for(var x = 0; x < $(".content_checkbox").length; x++) {
    if($(".content_checkbox").eq(x).next().text() == content) {
    $(".content_checkbox").eq(x).attr("checked", false);
    }
    }
    })
    })

    function text() {}
    </script>

  • 相关阅读:
    (转)ELK Stack 中文指南--性能优化
    (转)如何在CentOS / RHEL 7上安装Elasticsearch,Logstash和Kibana(ELK)
    (转)GlusterFS 01 理论基础,企业实战,故障处理
    (转)CentOS7.4环境下搭建--Gluster分布式集群存储
    (转)DB2性能优化 – 如何通过调整锁参数优化锁升级
    (转)架构师之DNS实战CentOS7VSCentOS6
    PHP:计算文件或数组中单词出现频率
    [获取行数]php读取大文件提供性能的方法,PHP的stream_get_line函数读取大文件获取文件的行数的方...
    Windows下配置环境变量和需不需要重启问题
    CENTOS 下安装APK反编译工具 APKTOOL
  • 原文地址:https://www.cnblogs.com/wangxiaoer5200/p/8693730.html
Copyright © 2011-2022 走看看