不多说，先上图片

本多选框是用的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. 学习Javascript的书籍（转）

    学习Javascript的书籍   作者: 阮一峰 日期: 2008年1月 9日 昨天,ppip同学留言: 你的js主要是用什么材料学的?推荐用哪本教程呢? 我想了一下,发现自己还真的读过不少书.我在 ...

  2. 使用Post进行Http通信

    --------------siwuxie095                             有道翻译官网:http://fanyi.youdao.com/     找到官网页面下方的 有 ...

  3. Ros学习——创建程序包

      1.程序包 一个程序包要想称为catkin程序包必须符合以下要求: 该程序包必须包含catkin compliant package.xml文件 这个package.xml文件提供有关程序包的元信 ...

  4. PHP的count(数组)和strlen(字符串)的内部实现

    PHP的count(数组)和strlen(字符串)的内部实现上是直接显示一个长度变量,还是重头依次数一遍有多少个元素?关乎我理解这2个函数的效率..希望高人能从php的c源码上讲一讲.没有源码看过源码 ...

  5. JavaPersistenceWithHibernate第二版笔记-第六章-Mapping inheritance-004Table per class hierarchy(@Inheritance..SINGLE_TABLE)、@DiscriminatorColumn、@DiscriminatorValue、@DiscriminatorFormula)

    一.结构 You can map an entire class hierarchy to a single table. This table includes columns for all pr ...

  6. python3-file的修改实现类似shell中sed的功能

    # Auther: Aaron Fan '''思路:目的是为了修改yesterday这个文件,但是因为无法直接去修改这个文件,所以需要先把修改好的内容写入高yesterday.new这个文件中,然后再 ...

  7. 创建Mat对象

    Mat 是一个非常优秀的图像类,它同时也是一个通用的矩阵类,可以用来创建和操作多维矩阵.有多种方法创建一个 Mat 对象. 1.构造函数方法 下面是一个使用构造函数创建对象的例子. 常用的构造函数 2 ...

  8. [转]Oracle截取字符串相关函数

    转至:http://www.cnblogs.com/qmfsun/p/4493918.html 1.instr(sourceString,destString,start,appearPosition ...

  9. 动态合并GridView数据行DataRow的列

    前段时间,Insus.NET一直在演示GridView控件Header头行或列:<动态变更GridView控件列名>和<动态合并或定制GridView控件Header头某些列> ...

  10. IDEA 基本操作

    1.IDEA 编译的JDK问题 点击出错的模块 将这个改成8,但是改了这个还是不行,项目一编译他有回去了. 正确的做法: 在跟pom.xml 中增加如下代码: <build> <pl ...