不多说，先上图片

本多选框是用的bootstrap的样式为基础，将弹出框css改造，然后自己写的js得到。

下面为全部页面的代码，需要的可以自己改动js，得到自己需要的效果

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <link href="css/bootstrap.css" rel="stylesheet" />

    <style>

        li {

            width:60px;

        }

    </style>

</head>

<body>

    <div class="container">

        <h1 class="page-header">多选框</h1>

        <div class="form-group">

            <div class="input-group">

                <div class="input-group-addon">选择流量包</div>

                <!--保存多选框的id-->

                <input type="hidden" id="ids" />

                <input class="form-control" type="text" id="txt" onclick="show(this)" placeholder="选择流量包" readonly style="width:350px">

                <div class="popover fade bottom in" id="panel" style="display:block;opacity:0">

                    <div class="arrow"></div>

                    <div class="popover-title" style="height:35px;">

                        <div class="checkbox" style="margin-top:0;margin-bottom:0px;"></div><label><input type="checkbox" onchange="CheckAll(this)" />全选</label>

                        <button type="button" class="close" onclick="hide()">

                            <span aria-hidden="true">&times;</span>

                            <span class="sr-only">Close</span>

                        </button>

                    </div>

                    <div class="popover-content">

                        <ul class="list-inline" id="ul" >

                            <!--<li><div class="checkbox"></div><label><input type="checkbox" value="0" onclick="Choose(this)"/>5M</label></li>-->

                        </ul>

                    </div>

                </div>

            </div>

        </div>

    </div>

</body>

</html>

<script src="js/jquery-3.1.1.js"></script>

<script src="js/bootstrap.js"></script>

<script>

    var data = ["5M", "10M", "20M", "30M", "50M", "70M", "100M", "150M", "200M", "500M", "1024M"];

    var objArr = [];

    for (var i = 0; i < data.length; i++) {

        var obj = new Object();

        obj.id = i;

        obj.value=data[i];

        objArr.push(obj);

    }

    $(function () {

        //加载多选框的数据

        var ul = $("#ul");

        for (var i = 0; i < objArr.length; i++) {

            ul.append("<li><div class='checkbox'></div><label><input type='checkbox' value=" + objArr[i].id + " onclick='Choose(this)'/>" + objArr[i].value + "</label></li>");

        }

    });

    //显示多选框

    function show(t) {

        //设置多选框显示的位置，在选择框的中间

        var left = t.offsetLeft + t.clientWidth / 2 - $("#panel")[0].clientWidth / 2

        var top = t.offsetTop + t.clientHeight + document.body.scrollTop;

        $("#panel").css("opacity", "1");

        $("#panel").css("margin-left", left);

        $("#panel").css("margin-top", top + 5);

    }

    //隐藏多选框

    function hide() {

        $("#panel").css("opacity", "0");

    }

    //全选操作

    function CheckAll(t) {

        var name = "";

        var ids = "";

        var popoverContent = $($(t).parent().parent().parent().children()[2]);

        popoverContent.find("input[type=checkbox]").each(function(i,th) {

            th.checked = t.checked;

            if (t.checked) {

                name += $(th).parent().text() + ",";

                ids += $(th).val() + ",";

            }

        });

        name = name.substr(0, name.length - 1);

        ids = ids.substr(0, ids.length - 1);

        $("#txt").val(name);

        $("#ids").val(ids);

    }

    //勾选某一个操作

    function Choose(t) {

        var oldName = $("#txt").val();

        var name = oldName == "" ? "," + $("#txt").val() : "," + $("#txt").val() + ",";

        var ids = oldName == "" ? "," + $("#ids").val() : "," + $("#ids").val() + ",";

        var newName = $(t).parent().text();

        var newid = $(t).val();

        if (t.checked) {//选中的操作

            $("#txt").val(name += newName + ",");

            $("#ids").val(ids += newid + ",");

        } else {//去掉选中的操作

            var index = name.indexOf(","+newName+",");

            var len = newName.length;

            name = name.substring(0, index) + name.substring(index + len + 1, name.length);

            var index = ids.indexOf("," + newid + ",");

            var len = newid.length;

            ids = ids.substring(0, index) + ids.substring(index + len + 1, ids.length);

        }

        name = name.substr(1, name.length - 2);

        ids = ids.substr(1, ids.length - 2);

        $("#txt").val(name);

        $("#ids").val(ids);

    }

</script>

bootstrap多选框的更多相关文章

  1. bootstrap复选框和单选按钮

    复选框和单选按钮标签包含在<Label>标签中<div class="checkbox"> <label><input type=&quo ...

  2. 转载：Bootstrap之表格checkbox复选框全选

    转:http://blog.csdn.net/shangmingchao[商明超的博客] 效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了: 版权声明:如需 ...

  3. Bootstrap之表格checkbox复选框全选

    效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了: <table class="table table-bordered table-hov ...

  4. Bootstrap之表格checkbox复选框全选 [转]

    转自: http://blog.csdn.net/shangmingchao/article/details/49761315 效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以 ...

  5. bootstrap table 复选框选中后，翻页不影响已选中的复选框

    使用的 jquery版本为 2.1.1 在项目中发现bootstrap table的复选框选中后,翻页操作会导致上一页选中的丢失,api中的 bootstrapTable('getSelections ...

  6. bootstrap table保留多选框的分页

    有时候需要完成这种情况: 1.需要设置的是如果第一页点击复选框然后点击其他页面的话,第一页的选项被保存了 2.将所有选择好的复选款的数据保存在数组中 bootstrap table官方文档http:/ ...

  7. Bootstrap 历练实例 - 按钮（Button）插件复选框

    复选框(Checkbox) 您可以创建复选框按钮 组,并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加复选框按钮组的切换. & ...

  8. bootstrap历练实例：复选框或单选按钮作为输入框组的前缀或后缀

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：复选框（Checkbox）和单选框（Radio）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. [转]JQuery 如何选择带有多个class的元素

    比如下面代码需要选择同时带有这几个class的元素,怎么写? 1 <div class="modal fade in"></div> A: 1. 依次过滤 ...

  2. (转)typedef和#define的用法与区别

    typedef和#define的用法与区别 一.typedef的用法 在C/C++语言中,typedef常用来定义一个标识符及关键字的别名,它是语言编译过程的一部分,但它并不实际分配内存空间,实例像: ...

  3. 算法Sedgewick第四版-第1章基础-025-用队列实现unix下的Directory命令

    package algorithms.util; /************************************************************************** ...

  4. GTXE_COMMON

    http://forums.xilinx.com/xlnx/board/crawl_message?board.id=IMPBD&message.id=9657 If you are usin ...

  5. 20169219《linux内核原理与分析》第九周作业

    网易云课堂学习 可执行程序的装载 可执行程序的产生过程:预处理-----> 编译 ----> 汇编 ----> 链接 以hello.c文件为例进行分析,编译步骤如下 vi hello ...

  6. java获取Excel的导出

    import java.io.*; import org.apache.commons.io.FileUtils; import org.apache.poi.hssf.usermodel.HSSFC ...

  7. GUID介绍

    GUID介绍 GUID(Global unique identifier)全局唯一标识符,它是由网卡上的标识数字(每个网卡都有唯一的标识号)以及 CPU 时钟的唯一数字生成的的一个 16 字节的二进制 ...

  8. c++语言的组合类的使用，用组合类的方法计算两点间距离。

    组合类的使用主要涉及到类的构造函数,类的复制构造函数. #include <iostream> #include<cmath> class Point{ public: Poi ...

  9. 洛谷 P4297 [NOI2006]网络收费

    P4297 [NOI2006]网络收费 题目背景 noi2006 day1t1 题目描述 网络已经成为当今世界不可或缺的一部分.每天都有数以亿计的人使用网络进行学习.科研.娱乐等活动.然而,不可忽视的 ...

  10. v$sqlarea,v$sql,v$sqltext这三个视图提供的sql语句有什么区别？

    v$sqltext存储的是完整的SQL,SQL被分割 SQL> desc v$sqltextName                                      Null?    ...