选择框html5中不同选项的单独输入选项

Question

我正在选择单选按钮。用户将选择其中一个，我需要为所选的任何选项显示单独的上传选项。例如，当用户选择“国民ID”时，将有一个上传按钮上传其NID图像，上面会具体显示“ Upload your NID image”，如果他选择Passport，则会显示一个上传按钮，该图像将获取Passport图像会特别显示“上传您的护照图像”。

<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的经典实现可能看起来像

this。

您可以利用事件委托来代替在每个输入元素上定义EventListeners的作用，其中子元素中的事件冒泡直到添加了侦听器的父元素。该收听者收听例如到change事件，并相应地设置按钮文本。

显示的文字存储在data-attribute中。

上面的示例应该是进一步实现细节的一个很好的起点。