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

this .

您可以利用事件委托(delegate)，而不是在每个输入元素上定义 EventListeners，其中子元素的事件冒泡到您添加监听器的父元素。这个听众听，例如到 change 事件并相应地设置按钮文本。

显示的文本存储在 data-attribute 中.

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