不多说，先上图片

本多选框是用的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. nginx 启动、重启、关闭命令

    一.启动 cd /usr/local/nginx/sbin ./nginx 二.重启 更改配置重启nginx kill -HUP 主进程号或进程号文件路径    或者cd /usr/local/ngi ...

  2. Java 访问 Kylin 总结

    这次开发功能是OEM统计报表.统计报表的数据由大数据平台部的同事收集,数据的展示由我们部门开发. 大数据那边使用 Kylin 分布式分析引擎(kylin官方文档). Kylin 虽比较偏向大数据相关, ...

  3. revit导出模型数据到sqlserver数据库

    revit软件可以导出模型数据到sqlserver数据库,有时候,为了对模型做数据分析,需要导出模型的数据,下面总结一下导出过程: 首先在sqlserver中建立一个数据库,如:revit_wujin ...

  4. 算法Sedgewick第四版-第1章基础-2.1Elementary Sortss-005插入排序的改进版

    package algorithms.elementary21; import algorithms.util.StdIn; import algorithms.util.StdOut; /***** ...

  5. 算法Sedgewick第四版-第1章基础-015一stack只保留last指针

    /************************************************************************* * * A generic queue, impl ...

  6. Linux内核2.6.14源码分析-双向循环链表代码分析(巨详细)

    Linux内核源码分析-链表代码分析 分析人:余旭 分析时间:2005年11月17日星期四 11:40:10 AM 雨 温度:10-11度 编号:1-4 类别:准备工作 Email:yuxu97101 ...

  7. android studio中退出时弹出对话框

    在app中总是不小心点击了退出怎么办?当然是加个弹出的提示框了,本人新手,就加在主界面上了 @Override public boolean onKeyDown(int keyCode, KeyEve ...

  8. MVC下为什么要使用Areas

    想研究一下这个Areas,在博客园知识库找到这篇文章,先全部搬过来吧,原文地址:http://kb.cnblogs.com/page/144561/ 为什么需要分离? 我们知道MVC项目各部分职责比较 ...

  9. GDI+绘图基础

    GDI+ 指的是.NET Framwork中提供的二维图像.图像处理等功能,是构成Windows操作系统的一个子系统,它提供了图形图像操作的应用程序编程接口(API). 使用GDI+可以用相同的方式在 ...

  10. day02.1-Linux虚拟操作系统的安装

    在windons环境中配置Linux虚拟操作系统,需要事先在Windons系统上下载并安装虚拟运行软件“VMware Workstations”,以下虚拟物理机的建立和虚拟Linux系统的配置都是在该 ...