индивидуальная опция ввода для разных опций в поле выбора html5

Question

Я делаю опцию радио кнопки. Пользователь выберет один из них, и мне нужно, чтобы для каждой выбранной опции была показана отдельная опция загрузки. то есть, когда пользователь выбирает «Национальный идентификатор», будет кнопка загрузки для загрузки изображения его NID, в котором будет указано «Загрузить изображение NID», а если он выберет «Паспорт», будет показана кнопка загрузки, которая будет принимать изображение паспорта. в котором будет указано «Загрузить изображение паспорта».

<li id="li_6" >
<label class="description" for="element_6">Type of ID<strong><abbr 
title="Mandatory">*</abbr></strong></label>

<span>
<input id="element_6_1" name="element_6" class="element radio" type="radio" 
value="1" />

<label class="choice" for="element_6_1">NID</label>
<input id="element_6_2" name="element_6" class="element radio" 
type="radio" value="2" />
<label class="choice" for="element_6_2">Passport</label>

</span> </li>

Answer 1

Классическая реализация с vanillaJS может выглядеть как

это .

Вместо определения EventListeners для каждого элемента ввода, вы можете использовать делегирование событий , где события от дочерних элементов всплывают до родительского элемента, к которому вы добавляете слушателя. Этот слушатель слушает, например, на событие change и соответственно устанавливает текст кнопки.

Какой текст отображается, хранится в атрибуте данных .

Приведенный выше пример должен послужить хорошей отправной точкой для дальнейших деталей реализации.