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 条评论
登录 后参与评论

相关文章

来自专栏知晓程序

小程序可以指纹识别了!我们还发现了一个更大的惊喜

这一次的新能力更新,包括设定分享卡片封面图、支持指纹识别等多种新功能,涵盖了小程序开发、运营和使用的各个方面。

12520
来自专栏Flutter入门到实战

安卓开发方式的进化之路

做安卓时间长了,接触到各种各样的框架,前前后后遇到了很多问题,这里顺便记录一下那些年在安卓开发的发展过程中的那些跨平台开发技术框架,大致如下:

22220
来自专栏腾讯社交用户体验设计

[ISUX转译]iOS 8人机界面指南(三):iOS技术(下)- 腾讯ISUX

14940
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

一个上架了的React Native项目实战总结

学习 : 视频开发教程 喜欢逛GitHub的小伙伴都知道,它有个查看最热项目的功能叫trending,但这个功能只能在网页上查看, 而且在手机上浏览显示效...

55280
来自专栏phodal

我的职业是前端工程师【六】:前端程序员如何有效地提高自己

要成为一个优秀的前端工程师,需要什么技能和学习?答案:练习 在逛知乎、SegmentFault 又或者是相似的技术社区,我们总会看到类似的问题。新手总会关注于,...

22860
来自专栏SAP最佳业务实践

SAP最佳业务实践:ETO–项目装配(240)-11研发工作

image.png CJ20N开始研发工作 在此项目中,设置 WBS 要素订单 来控制 WBS 要素 研发、生产和交货/测试 中的对应活动。在完成研发工作后,可...

43090
来自专栏腾讯云API

【视频】云API组合应用实战: 英汉互译小工具

云API团队在云学院上线了一套视频教程,目的是和大家分享如何进行API、SDK和CLI的使用。

404110
来自专栏非著名程序员

一个 Bug 引发的思考(超赞的文章)

? 写在最前面~ 这篇文章是对前端定位方案的一篇总结,平日我们在前端开发过程中针对定位问题不会专门专注内部的实现原理,会直接调用封装好的库去实现定位能力。这样...

41780
来自专栏SAP梦心的SAP分享

【域控管理】域控的必要性

题记:本来域控这玩意儿跟我没有半毛钱关系,毕竟我是做应用类的,域控纯属系统管理范畴。 以前在TTE和LDS,公司里有使用域控,几年来以使用者的角度在观察,觉得这...

27750
来自专栏知晓程序

好奇心日报的 App 和小程序,你会选哪个?

20060

扫码关注云+社区

领取腾讯云代金券