在前端开发中，有时候我们需要根据用户的选择来显示或隐藏表单中的部分字段。本文将介绍如何使用JavaScript和HTML来实现这一功能。
HTML结构
首先，我们需要为单选按钮和对应的输入框设置相同的name属性，以便它们能够被正确地关联起来。例如：
-- -------------------- ---- ------- ------- ------ ------------ ------------ ------------ -- -------- ------- ------ ------------ ------------ ------------- -- -------- ---- -------------- ---------------------- ------------------- -------------------- ------ ---- --------------- ---------------------- ------------------- -------------------- ------
在上面的示例中，我们有两个单选按钮（“红色”和“蓝色”），每个单选按钮都有一个对应的输入框（“红色输入框”和“蓝色输入框”），这些输入框最初是隐藏的。
注意，我们给每个输入框添加了一个唯一的id属性，这样我们可以在JavaScript代码中引用它们。
JavaScript代码
下一步是编写JavaScript代码，该代码将根据用户的选择来显示或隐藏相应的输入框。我们可以使用addEventListener方法来监听单选按钮的更改事件，并使用getElementById方法来获取需要显示或隐藏的输入框元素。
-- -------------------- ---- -------
----- -------- - -------------------------------------
----- --------- - --------------------------------------
---------------------------------------------------------------- -- -
-------------------------------- -- -- -
-- ------------ --- ------ -
---------------------- - --------
----------------------- - -------
- ---- -- ------------ --- ------- -
---------------------- - -------
----------------------- - --------
-
---
---在上面的代码中，我们首先使用getElementById方法获取了输入框元素，然后使用querySelectorAll方法获取所有具有name属性为“color”的单选按钮。接下来，我们将通过循环迭代每个单选按钮，并为其添加一个事件监听器，在单选按钮状态更改时触发。
在事件处理程序中，我们检查哪个单选按钮当前被选中，并根据选择的颜色值显示或隐藏相应的输入框。如果选择红色，则将“红色输入框”显示出来，同时将“蓝色输入框”隐藏起来；如果选择蓝色，则反之。
示例代码
最终，我们可以将上述HTML和JavaScript代码组合起来，以创建一个完整的示例：
-- -------------------- ---- -------
--------- -----
------
------
-------------------------------
-------
-----------
----------- -
----------- -----
-------- -----
-
--------
-------
------
-------
------ ------------ ------------ ------------ --
--------
-------
------ ------------ ------------ ------------- --
--------
---- ---------------
------------------- --------------------
------
---- ----------------
------------------- --------------------
------
--------
----- -------- - -------------------------------------
----- --------- - --------------------------------------
---------------------------------------------------------------- -- -
-------------------------------- -- -- -
-- ------------ --- ------ -
---------------------- - --------
----------------------- - -------
- ---- --
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------