专栏首页编程微刊jQuery点击checkbox选择标签到指定的位置

jQuery点击checkbox选择标签到指定的位置

写在前面的话

祖传代码的存在,这个项目自我进公司以来,就一直在改写加上维护,没有什么太厉害的技术,据说在我进公司之前,是经过两个Java后台来编写遗留下来的代码,公司觉得若是重新搭建框架过于费力,于是一直沿用至今,随着功能的越来越多,维护起来也是相当的费脑,每次修改的时候,我都会将某个部分的功能记录下来,写在自己的技术博客里面,以防混淆。

实现效果:

参考链接:https://www.jianshu.com/p/539b51b775d0

写了个demo

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <style>
            html,
            body {
                width: 100%
            }
            
            .bg_gray {
                background-color: #F1F1F1;
                font-size: 14px;
                height: 28px;
                line-height: 28px;
            }
            
            .container {
                width: 500px;
                border: 1px solid #000;
            }
            
            .lead {
                border: 1px solid #f1f1f1;
                height: 40px;
                margin-top: 10px;
            }
            
            .breadcrumb {
                background-color: #fff;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="row bg_gray">
                <div class="col-xs-6">
                    选择部门
                </div>
                <div class="col-xs-6 text-right">×</div>
            </div>
            <p class="lead">
            </p>
            <div class="row">
                <ol class="breadcrumb">
                    <li>
                        <a href="#">华东师范大学>经管学部</a>
                    </li>
                </ol>
            </div>
            <ul class="list-group">
                <li class="list-group-item">
                    <div class="row">
                        <div class="col-xs-6">
                            <input type="checkbox" name="check_all" />全选
                        </div>
                        <div class="col-xs-6 text-right">
                            5>
                        </div>
                    </div>
                </li>
                <li class="list-group-item">
                    <div class="row">
                        <div class="col-xs-5 col-xs-offset-1">
                            <input type="checkbox" name="check" onclick="getCheck()" />经济学院
                        </div>
                        <div class="col-xs-6 text-right">
                            5>
                        </div>
                </li>
                <li class="list-group-item">
                    <div class="row">
                        <div class="col-xs-5 col-xs-offset-1">
                            <input type="checkbox" name="check" onclick="getCheck()" />MBA教育学院
                        </div>
                        <div class="col-xs-6 text-right">
                            5>
                        </div>
                </li>
            </ul>
            <div class="row">
                <div class="col-xs-6 text-center">
                    <button class="btn btn-default btn-lg">取消</button>
                </div>
                <div class="col-xs-6 text-center">
                    <button class="btn btn-info btn-lg">确定</button>
                </div>
            </div>
            </div>
    </body>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $("[name=check]").on("change", function() {
            var vl = $.trim($(this).parent().text())
            var val = $('<button type="button" class="btn btn-info btn-sm">' + vl + '</button>')
            if($(this).is(":checked")) {
                if($("button:contains(" + vl + ")").length == 0) {
                    $(".lead").append(val)
                }
            } else {
                $("button:contains(" + vl + ")").remove()
            }

        })
        $("[name=check_all]").on("change", function() {
            if($(this).is(":checked")) {
                $.map($("[name=check]"), function(val, index) {
                    $(val).attr("checked", "checked")
                    $("[name=check]").eq(index).trigger("change")
                })
            } else {
                $.map($("[name=check]"), function(val, index) {
                    $(val).removeAttr("checked")
                    $("[name=check]").eq(index).trigger("change")
                })
            }
        })

        function getCheck() {
            var flag = 1;
            $.map($("[name=check]"), function(val, index) {

                if(!$(val).is(":checked")) {
                    flag = 0;

                }
            })
            if(!flag) {
                $("[name=check_all]").removeAttr("checked")
            } else {
                $("[name=check_all]").attr("checked", "checked")
            }
        }
    </script>

</html>

原文作者:祈澈姑娘技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 全选或者单选checkbox的值动态添加到div

    王小婷
  • jQuery点击按钮,生成input输入框

    需求,点击添加按钮,生成input输入框,如果上一个输入框为空,则弹出提示框提示,若不为空,则生成一行input框。

    王小婷
  • jquery动态生成input,并且限制生成个数

    写一个小的demo,具体是点击添加按钮,会自动生成input输入框,并且根据要求限制生成的input输入框的个数。

    王小婷
  • 全选或者单选checkbox的值动态添加到div

    王小婷
  • Django之ModelForm

      在前面有篇博客,我写了一个叫forms组件的东西,可以帮助我们完成校验数据、渲染标签功能和在前端页面局部刷新功能,功能封装的已经很好了,当时已经很开心了。但...

    py3study
  • Django+xadmin打造在线教育平台(二)

    代码 github下载 三、xadmin后台管理 3.1.xadmin的安装 django2.0的安装(源码安装方式): https://github.com...

    zhang_derek
  • Python测试开发-创建模态框及保存数据

    模态框是指的在覆盖在父窗体上的子窗体。可用来做交互,我们经常会看到模态框用来登录、确定等等,到底是怎么实现这种弹出效果,bootstrap已经为我们提供了相...

    测试开发社区
  • html5趣聊项目|语音即时聊天|地图定位

    andy2018
  • 一个简单的卡动车排队系统

    week
  • Bootstrap-3-Typeahead

    是Bootstrap-3-Typeahead,不是Twitter open source的typeahead,两者用法有差异。外加如果配合原生的Bootstra...

    _淡定_

扫码关注云+社区

领取腾讯云代金券