不多说，先上图片

本多选框是用的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. SpringMVC接收对象数组参数进行封装

    前台代码:注意.contentType : "application/json; charset=utf-8",必须要设置,只有这样SpringMVC才认识这个json数组参数 f ...

  2. Luogu 4103 [HEOI2014]大工程

    BZOJ 3611 明明在BZOJ上是$6s$的时限,怎么到Luogu上就变成$4s$了…… 按照套路建出虚树,点之间的距离可以变成边权表示在虚树上,然后考虑如何树形$dp$. 最大值和最小值应当比较 ...

  3. Luogu 4197 Peaks

    BZOJ 3545 带权限. 考虑离线,把所有边按照从小到大的顺序排序,把所有询问也按照从小到大的顺序排序,然后维护一个并查集和一个权值线段树,每处理一个询问就把比这个询问的$x$更小的边连上,具体来 ...

  4. Loading Large Bitmaps Efficiently

    有效地加载大位图文件-Loading Large Bitmaps Efficiently 图像有各种不同的形状和大小.在许多情况下,他们往往比一个典型应用程序的用户界面(UI)所需要的资源更大.例如, ...

  5. Mysql--连接查询

    内连接查询 意义:找到表和表之间的关系或者是桥梁.连接查询是查询两个或者两个以上的表时使用的. JOIN|CROSS JOIN| INNER JOIN    通过ON  连接条件(这三个方式都行)一般 ...

  6. PL/SQL与SQL（Oracle）Case语句

    (使用scott账户下的表) 1.Oracle SQL语句的case语句写法: --sql中的case用于分支判断并返回某个值. select empno , ename, deptno , case ...

  7. fiddler抓包后Jmeter实现登录接口

    登录接口测试时,先要抓取登录接口,我们使用fiddler来抓包,如下图: 然后再使用Jmeter,填写相对于的参数. 查看结果树: 关键在与抓包,搞清楚抓包的信息,可以用fiddler和火狐和谷歌.我 ...

  8. Python3 简单的三级列表思路

    Python3 简单的三级列表思路(初学者 比较low) 代码如下: info = { '北京':{ '沙河':['benz','momo'], '朝阳':['北土城','健德门'], '国贸':[' ...

  9. 手把手教你如何制作和使用lib和dll_转载

    目录 静态库 什么是静态库? 怎么创建 如何使用 静态库的第一种使用方法 静态库的第二种使用方法 动态链接库 动态库是什么? 怎么创建 如何使用 隐式调用 显式调用 静态库什么是静态库?我们先来说一下 ...

  10. P4012 深海机器人问题

    \(\color{#0066ff}{题目描述}\) 深海资源考察探险队的潜艇将到达深海的海底进行科学考察. 潜艇内有多个深海机器人.潜艇到达深海海底后,深海机器人将离开潜艇向预定目标移动. 深海机器人 ...