不多说，先上图片

本多选框是用的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. extends与implements

    implements一般是实现接口. extends 是继承类. 接口一般是只有方法声明没有定义的, 那么java特别指出实现接口是有道理的,因为继承就有感觉是父类已经实现了方法,而接口恰恰是没有实现 ...

  2. 3-2 zk客户端连接关闭服务端，查看znode

    使用ZooKeeper官方提供的Client来连接.路径类似的结构. 连接到我们的门户HOST. quota属于zookeeper.quota是子节点,zookeeper是父节点.quota其实是一个 ...

  3. koa2 原生链接mysql

    1.安装mysql $ npm install mysql 2.代码示例: const mysql = require("mysql"); // mysql.Promise = g ...

  4. win10获取超级管理员权限脚本实现

    建立一个TXT文件,把下面的脚本贴到里面,然后把后缀改成reg格式,双击添加到注册表就可以了, win10_1703版本亲测可用.... Windows Registry Editor Version ...

  5. Java C++ Socket通讯

    import java.net.*; import javax.swing.plaf.SliderUI; /** * 与c语言通信(java做client,c/c++做server,传送一个结构) * ...

  6. Python 黑客 004 用Python构建一个SSH僵尸网络 01 简介

    用Python构建一个SSH僵尸网络 01 简介 一. 构建一个SSH僵尸网络的流程图: Created with Raphaël 2.1.0手动操作,实现通过SSH连接目标服务器(手动)用 Pexp ...

  7. R: 绘图 barplot

    问题:barplot 18.5.16 怎么绘制 barplot,用两种方式:基础绘图 & ggplot2解决方案: 基础绘图 barplot(height, width = 1, space ...

  8. can基础知识介绍

    1.什么是can 2.can的特点 2.物理层特征 我们使用ISO11898标准,物理层特征如图所示 3.帧的种类介绍 实际上有一些帧是有硬件来实现的. 4.数据帧介绍 5.总线仲裁 6.位时序(用于 ...

  9. EMR问题

    -- 门急诊患者生命体征信息 select t.clinic_code, t.*,t.rowid from ptm_opr_maininfo t where t.patient_id='0000E05 ...

  10. C#.Net使用正则表达式抓取百度百家文章列表

    工作之余,学习了一下正则表达式,鉴于实践是检验真理的唯一标准,于是便写了一个利用正则表达式抓取百度百家文章的例子,具体过程请看下面源码: 一:获取百度百家网页内容 public List<str ...