Как правильно клонировать input[type=radio]?

Question

[Иван Симонов]

Объясните, почему не происходит клонирование input[type=radio], с соот. изменением name?

Answer 1

[0xD34F]

Хотите, чтобы суффиксы у атрибутов name были правильные - оператор + вам в помощь, добавляйте сколько надо.

Хотите, чтобы клонирование происходило не только по клику на кнопку, что существует изначально, но и по новым - клонируйте элементы вместе с обработчиками событий или делегируйте обработку клика контейнеру.

// исправляем ваш код
$('.add-attr').on('click', function() {
  const index = $('.radios').length + 1;

  const $lastRow = $(this).closest('.container').find('.item').last();
  const $newRow = $lastRow.clone(true).insertAfter($lastRow);

  $newRow.find('input[type="radio"]').prop('name', 'name-' + index);
});

// или переписываем его без использования jquery
document.querySelector('.container').addEventListener('click', e => {
  if (e.target.classList.contains('add-attr')) {
    const row = e.currentTarget.firstElementChild.cloneNode(true);
    const name = `name-${e.currentTarget.children.length + 1}`;
    e.currentTarget.appendChild(row);
    row.querySelectorAll('[type="radio"]').forEach(n => n.name = name);
  }
});

Comments

[Иван Симонов]

Клонируется только 1 раз, также attribute name не изменяется

[0xD34F]

Не рассказывайте сказки - клонируется много раз, name меняется.

[Иван Симонов]

0xD34F, при 1 клонировании name не меняется

[0xD34F]

То есть, всё-таки меняется, но немного иначе, чем вам надо. Ну так подумайте, где вы ошиблись при вычислении суффикса name'а. Вместо $('.radios').length должно быть... ну же, не тупите.

[0xD34F]

Так, ладно, ответ обновил - смотрите, думайте.

[Иван Симонов]

0xD34F, разобрался