Блог

Мне нужен скрипт для моего Asp.Net Приложение, которое я хотел бы, чтобы оно делало что-то относительно простое и понятное. Мне нужен список тегов, который взаимодействует с группой флажков в представлении, и только.

В принципе, если я нажму на флажок ниже, я хочу, чтобы в поле тегов / списке тегов появился тег с именем, которое имеет указанный флажок (который может быть «значением =» флажка), и если я нажму на X, чтобы удалить тег из списка тегов, этоснимите флажок, связанный с этим тегом. И это все, что мне нужно.

Будучи кодом в представлении, что-то такое простое, как это, которое может иметь количество флажков N.

 <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>
 

Как я могу это сделать? Заранее спасибо, если вы можете мне помочь.

Вы можете попробовать использовать ввод тегов начальной загрузки, проверьте следующий пример кода:

 <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 в раздел.

Вывод, как показано ниже:

Более подробную информацию об использовании ввода тегов начальной загрузки см. в примерах ввода тегов начальной загрузки