bootstrap：tap+checkbox

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <meta content="" name="description" />
    <meta content="" name="author" />
    <meta http-equiv="Expires" CONTENT= "0">
    <meta http-equiv="Cache-Control" CONTENT= "no-cache">
    <meta http-equiv="Pragma" CONTENT= "no-cache">

    <link href="/bootstrap/css/bootstrap.css" rel="stylesheet" />
    <script src="/js/jquery.min.js"></script>
    <script src="/bootstrap/js/bootstrap.js"></script>
</head>
<body>
    <div style="" align="center">
        <ul id="myTab" class="nav nav-tabs">
            <li class="active">
                <a href="#finaceing" data-toggle="tab">
                    融资方注册
                </a>
            </li>
            <li>
                <a href="#investor" data-toggle="tab">
                    投资方注册
                </a>
            </li>
        </ul>
    </div>
    <!--Tap-->
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="finaceing">
            <p style="color: darkgreen" align="center">融资方注册</p>
            <div class="input-group">
                <span class="input-group-addon">&ensp;企业名称&ensp;</span>
                <input id="finaceing_name" type="text" class="form-control" placeholder="请输入企业名称">
            </div>
            <div class="input-group">
                <span class="input-group-addon">营业执照号</span>
                <input id="finaceing_num" type="text" class="form-control" placeholder="请输入营业执照号">
            </div>
            <div class="input-group">
                <span class="input-group-addon">&ensp;&ensp;手机号&ensp;&ensp;</span>
                <input id="finaceing_phone" type="text" class="form-control" placeholder="请输入手机号">
            </div>
            <div class="input-group">
                <span class="input-group-addon">&ensp;用户密码&ensp;</span>
                <input id="finaceing_pwd" type="password" class="form-control" placeholder="请输入密码">
            </div>
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon">&ensp;企业标签&ensp;</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 align="center">-->
                <button type="button" class="btn btn-primary btn-lg btn-block" style="align:center;">注册</button>
            <!--</div>-->
        </div>
        <div class="tab-pane fade" id="investor">
            <p style="color: darkgreen" align="center">投资方注册</p>
        </div>
    </div>
</body>

    <script type="text/javascript">
        var data = ["食品加工", "农牧渔业", "机械制造", "生产加工", "零件连锁", "互联网", "土木工程", "影视企业", "食品生产", "食品生产", "食品生产"];
        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>

</html>

checkbox的样式：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <meta content="" name="description" />
    <meta content="" name="author" />
    <meta http-equiv="Expires" CONTENT= "0">
    <meta http-equiv="Cache-Control" CONTENT= "no-cache">
    <meta http-equiv="Pragma" CONTENT= "no-cache">

    <link href="/bootstrap/css/bootstrap.css" rel="stylesheet" />
    <script src="/js/jquery.min.js"></script>
    <script src="/bootstrap/js/bootstrap.js"></script>
    <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>
<script type="text/javascript">
    var data = ["食品加工", "农牧渔业", "机械制造", "生产加工", "零件连锁", "互联网", "土木工程", "影视企业", "食品生产", "食品生产", "食品生产"];
    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>
</html>

bootstrap：tap+checkbox

相关推荐