如何使用脚本制作与一组 CheckBoxes 交互的 TagList？

Question

我需要一个用于我的 Asp.Net 应用程序的脚本，我希望它能够做一些相对简单明了的事情。我想要一个与视图中的一组复选框交互的 TagList，仅此而已。

基本上，如果我单击下面的复选框，我希望在 Tagfield/TagList 中出现一个标签，其名称与复选框具有的名称（可以是复选框的“值 =”），如果我单击 X 以从 TagList 中删除标签，这将取消选中与该标签关联的复选框。这就是我所需要的。

作为View中的代码，就这么简单，可以有N个Checkboxes。

<div class="wrapper">
 <div><input id=1 type="checkbox" name="group" value="Item 1" class="X"/>Item 1</div>
<div><input id=2 type="checkbox" name="group" value="Item 2" class="X"/>Item 2</div>
<div><input id=3 type="checkbox" name="group" value="Item 3" class="X"/>Item 3</div>
......
<div><input id=N type="checkbox" name="group" value="Item N" class="X"/>Item N</div>
</div>

我该怎么做？如果您能帮助我，请提前致谢。

Answer 1

您可以尝试使用Bootstrap Tags Input，查看以下示例代码：

<div class="wrapper">
    <label>Tags :</label>
    <input type="text" data-role="tagsinput" id="tagsinput" name="tags" class="form-control"><input type="button" id="btnGetValue" value="Get Value" /><br />
    <div><input id=1 type="checkbox" name="group" value="Item 1" class="X" />Item 1</div>
    <div><input id=2 type="checkbox" name="group" value="Item 2" class="X" />Item 2</div>
    <div><input id=3 type="checkbox" name="group" value="Item 3" class="X" />Item 3</div>
</div>

@section Scripts{

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha256-aAr2Zpq8MZ+YA/D6JtRD3xtrwpEz2IqOS+pWD/7XKIw=" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" integrity="sha512-xmGTNt20S0t62wHLmQec2DauG9T+owP9e6VU8GigI0anN7OXLip9i7IwEhelasml2osdxX71XcYm6BQunTQeQg==" crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha256-OFRAJNoaD8L3Br5lglV7VyLRf0itmoBzWUoM+Sji4/8=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js" integrity="sha512-VvWznBcyBJK71YKEKDMpZ0pCVxjNuKwApp4zLF3ul+CiflQi6aIJR+aZCP/qWsoFBA28avL5T5HA+RE+zrGQYg==" crossorigin="anonymous"></script>

    <style type="text/css">
        .bootstrap-tagsinput {
            width: 100%;
        }

        .label-info {
            background-color: #17a2b8;
        }

        .label {
            display: inline-block;
            padding: .25em .4em;
            font-size: 75%;
            font-weight: 700;
            line-height: 1;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: .25rem;
            transition: color .15s ease-in-out,background-color .15s ease-in-out, border-color .15s ease-in-out,box-shadow .15s ease-in-out;
        }
    </style>

    <script>
        $(function () {
            //attatch click event to the checkbox, then, based on the checked checkboxes to add value to the tags input.
            $(".wrapper input[type='checkbox']").each(function (inde, item) {
                $(item).click(function () {
                    var checkedvalue = [];
                    $(".wrapper input[type='checkbox']:checked").each(function (index, ele) {
                        checkedvalue.push($(ele).val());
                    })
                    var result = checkedvalue.join(",");
                    $("#tagsinput").tagsinput('removeAll');
                    $("#tagsinput").tagsinput('add', result);

                });
            });
            //trace the tag remove event, then, based on the tags to checked/unchecked the checkbox
            $("#tagsinput").on('itemRemoved', function () {
                var valarray = $("#tagsinput").val().split(",");
                $(".wrapper input[type='checkbox']").each(function (index, item) {
                    if (jQuery.inArray($(item).val(), valarray) != -1) {
                        $(item).prop("checked", true);
                    }
                    else {
                        $(item).prop("checked", false);
                    }
                });
            });
            //get the selected tags.
            $("#btnGetValue").click(function () {
                alert($("#tagsinput").val());
            });
        });
    </script>
}

[注意]首先要加载JQuery引用，在这个示例中，我使用默认布局页面，所以不需要在该部分添加JQuery引用。

输出如下：

有关使用引导标签输入的更多详细信息，请查看the Bootstrap Tags Input Samples