0

Есть список элементов, напротив которых ставятся флаги, при постановке флага элемент должен попадать в текстовое поле, если флаг убирается, то элемент должен удалиться из формы.

Понимаю, что при постановке флага сначала форма должна очищаться, пробовал это реализовать, но либо элементы не заносятся, либо не происходит очистка.

var textArea = $('.text');
$('input').change(function() {
  //textArea.val('');
  $("input:checked").each(function(i) {
    textArea.append($(this).siblings().text() + ';\n');
  })
});
textarea.text {
  height: 250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="form-item">
  <input type="checkbox">
  <label class="option">Первый элемент</label>
</div>
<div class="form-item">
  <input type="checkbox">
  <label class="option">второй элемент</label>
</div>
<div class="form-item">
  <input type="checkbox">
  <label class="option">Последний элемент</label>
</div>
<textarea class='text'></textarea>

2 ответа 2

1
var textArea = $('.text');
$('input').change(function() {
  textArea.val('');
  $("input:checked").each(function(i) {
    textArea.val(textArea.val() + $(this).siblings().text() + ';\n');
  })
});
1

Можно поправить селектор, чтобы сразу получать нужные label, воспользоваться методом map для получения массива строк, объединить массив строк с помощью функции join и вставить полученную строку за один шаг с помощью функции val

var textArea = $('.text');
$('input').change(function() {
  textArea.val($("input:checked + label").map((_, el) => el.textContent + ';').get().join('\n'));
});
textarea.text {
  height: 250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="form-item">
  <input type="checkbox">
  <label class="option">Первый элемент</label>
</div>
<div class="form-item">
  <input type="checkbox">
  <label class="option">второй элемент</label>
</div>
<div class="form-item">
  <input type="checkbox">
  <label class="option">Последний элемент</label>
</div>
<textarea class='text'></textarea>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.