Поместите текст справа от флажка
Я пытаюсь динамически создавать пользовательский интерфейс для меток и флажков.
Моя идея - построить вот так
function renderCheckbox(ui, uiField, labelText, idField, nameOnForm){
let id = abp.helper.getUniqueElementId();
let container = $('<div class = "form-group col-lg-3 col-md-3 col-sm-6">');
let label = $('<label class = "m-checkbox mt-35px">').attr('for', idField).text(labelText);
let checkbox = $('<input type = "checkbox" class = "filter">').attr('name', nameOnForm).attr('id', idField);
checkbox.appendTo(label);
let result = container.append(label);
return result;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class = "form-group col-lg-3 col-md-3 col-sm-6">
<label for = "HideVerifiedTickets" class = "m-checkbox mt-35px">
<input id = "HideVerifiedTickets" class = "filter" type = "checkbox" name = "HideVerifiedTickets" />
HideVerifiedTickets
<span></span>
</label>
</div>но проблема в том, что он генерирует HTML вот так
Как переместить текст после флажка?
Вы можете стилизовать метку как флексбокс с обратным расположением строк.
Поскольку вы используете for=, вам не нужно вставлять флажок внутри метки, поэтому container.append(checkbox).append(label); return container;
@fdomn-m понял твою точку зрения. Правильный.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете создать textNode с помощью метода createTextNode() и добавить его к метке так же, как вы это делаете с флажком.
В примере я удалил атрибут for и идентификатор элемента ввода, поскольку они, вероятно, не нужны.
let cb1 = renderCheckbox(null, null, 'Test', 'test');
$(document.forms.form01).append(cb1);
function renderCheckbox(ui, uiField, labelText, nameOnForm) {
let container = $('<div class = "form-group col-lg-3 col-md-3 col-sm-6">');
let label = $('<label class = "m-checkbox mt-35px">');
let checkbox = $('<input type = "checkbox" class = "filter">').attr('name', nameOnForm);
checkbox.appendTo(label);
let text = $(document.createTextNode(labelText));
text.appendTo(label);
container.append(label);
return container;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form name = "form01">
</form>зачем создавать дополнительную переменную и присваивать ей весь HTML, а затем возвращать ее?
@Death-is-the-real-truth Я не уверен, что понимаю ваш вопрос на 100%, но когда я отвечаю на вопрос, я часто стараюсь получить ответ, включая пример кода, как можно ближе к тому, что есть в вопросе OP. Если вы ссылаетесь на переменную let cb1, это просто для тестирования. Как вы можете прочитать из вопроса, у OP есть много флажков для вставки, поэтому в рабочем коде, вероятно, есть какой-то цикл, который вызывает функцию renderCheckbox - как это выглядит, мы не знаем. Мой ответ просто сосредоточен на том, чтобы заставить функцию возвращать правильное значение и сделать код максимально прозрачным/понятным.
Я спрашиваю об этих строках let result = container.append(label); return result;
Вместо
checkbox.appendTo(label);просто используйтеcheckbox.prependTo(label);...?