如何根据单选按钮选择显示和隐藏输入框

在前端开发中，有时候我们需要根据用户的选择来显示或隐藏表单中的部分字段。本文将介绍如何使用JavaScript和HTML来实现这一功能。

HTML结构

首先，我们需要为单选按钮和对应的输入框设置相同的name属性，以便它们能够被正确地关联起来。例如：

-------
  ------ ------------ ------------ ------------ --
--------
-------
  ------ ------------ ------------ ------------- --
--------

---- -------------- ----------------------
  ------------------- --------------------
------
---- --------------- ----------------------
  ------------------- --------------------
------

在上面的示例中，我们有两个单选按钮（“红色”和“蓝色”），每个单选按钮都有一个对应的输入框（“红色输入框”和“蓝色输入框”），这些输入框最初是隐藏的。

注意，我们给每个输入框添加了一个唯一的id属性，这样我们可以在JavaScript代码中引用它们。

JavaScript代码

下一步是编写JavaScript代码，该代码将根据用户的选择来显示或隐藏相应的输入框。我们可以使用addEventListener方法来监听单选按钮的更改事件，并使用getElementById方法来获取需要显示或隐藏的输入框元素。

----- -------- - -------------------------------------
----- --------- - --------------------------------------

---------------------------------------------------------------- -- -
  -------------------------------- -- -- -
    -- ------------ --- ------ -
      ---------------------- - --------
      ----------------------- - -------
    - ---- -- ------------ --- ------- -
      ---------------------- - -------
      ----------------------- - --------
    -
  ---
---

在上面的代码中，我们首先使用getElementById方法获取了输入框元素，然后使用querySelectorAll方法获取所有具有name属性为“color”的单选按钮。接下来，我们将通过循环迭代每个单选按钮，并为其添加一个事件监听器，在单选按钮状态更改时触发。

在事件处理程序中，我们检查哪个单选按钮当前被选中，并根据选择的颜色值显示或隐藏相应的输入框。如果选择红色，则将“红色输入框”显示出来，同时将“蓝色输入框”隐藏起来；如果选择蓝色，则反之。

示例代码

最终，我们可以将上述HTML和JavaScript代码组合起来，以创建一个完整的示例：

--------- -----
------
  ------
    -------------------------------
    -------
      -----------
      ----------- -
        ----------- -----
        -------- -----
      -
    --------
  -------
  ------
    -------
      ------ ------------ ------------ ------------ --
    --------
    -------
      ------ ------------ ------------ ------------- --
    --------

    ---- ---------------
      ------------------- --------------------
    ------
    ---- ----------------
      ------------------- --------------------
    ------

    --------
      ----- -------- - -------------------------------------
      ----- --------- - --------------------------------------

      ---------------------------------------------------------------- -- -
        -------------------------------- -- -- -
          -- ------------ --- ------ -
            ---------------------- - --------
            ----------------------- - -------
          - ---- --

----------------------------------------------------------- ----------
---------------------------------------------------------------------------------------
阅读全文

猜你喜欢

  • AngularJS 中的货币格式化：在欧元符号后显示

    在AngularJS中，我们可以使用内置的currency过滤器轻松地将数字转换为货币格式。但是默认情况下，该过滤器在货币符号之前显示金额。如果您需要在欧元符号后面显示金额，可以通过以下步骤实现： 第...

    6 年前
  • 如何将x，y坐标转换为角度？

    在前端开发中，我们经常需要处理坐标和角度的转换，特别是在绘制图形或动画时。本文将介绍如何将直角坐标系中的x和y坐标值转换为极坐标系下的角度。 前置知识 在了解如何进行坐标和角度转换之前，我们需要先掌握...

    6 年前
  • ImmutableJS Map() 和 fromJS() 的区别

    在前端开发中，使用 ImmutableJS 可以方便地处理复杂数据结构，提高性能和代码可读性。其中，Map() 和 fromJS() 是 ImmutableJS 提供的两种不同的数据类型处理方式，但许...

    6 年前
  • 如何检查图片的 src 是否存在 - see if src of img exists

    在前端开发中，常常需要使用图片来展示内容。但是，有时候我们并不确定图片的链接是否有效，如果直接使用这样的链接，会造成页面加载缓慢或者显示错误的情况。因此，在使用图片之前，我们应该先对图片链接进行检查，...

    6 年前
  • 在前端中检测iPad的方向变化

    当用户在 iPad 上旋转设备时，可能需要调整您的 Web 应用程序的布局和视觉效果。为了实现这样的调整，您需要检测 iPad 的方向变化。本文将介绍如何在前端代码中实现这一功能。

    6 年前
  • 用 jQuery 根据索引获取表格数据（td）

    在 Web 开发中，我们经常会使用表格来展示和处理数据。当需要获取表格的某一列或某一行时，我们可以通过 jQuery 来实现。 获取指定行的数据 要获取表格中的某一行数据，我们可以使用 eq() 方法...

    6 年前
  • 50 === 50: false. 50 == 50: true?

    在前端开发中，我们经常会用到比较操作符，如==和===。但是，这两种操作符之间有什么区别呢？在本文中，我们将探讨这个问题，并提供一些示例代码来加深对这个主题的理解。

    6 年前
  • 在 JavaScript 类中使用“this”关键字的setTimeout()方法

    在编写 JavaScript 类时，我们经常需要使用setTimeout()方法来延迟执行某些代码。然而，在类中使用setTimeout()方法可能会导致this关键字的上下文出现问题。

    6 年前
  • 获取 Span 文本值的方法

    在前端开发中，我们经常需要获取页面上某个元素的文本内容。对于 span 元素来说，获取其文本值是一个很基础的操作。本文将介绍如何使用 JavaScript 获取 span 元素的文本值，并提供一些示例...

    6 年前
  • 使用jQuery创建Canvas元素并设置其宽度和高度属性

    简介 在前端开发中，Canvas是一个非常有用的HTML5元素，允许您以编程方式绘制图形和动画。在本文中，我们将介绍如何使用jQuery创建Canvas元素，并设置其宽度和高度属性。

    6 年前
  • 使用 Angular Material 实现文件上传

    在前端应用程序中，处理文件上传是非常常见的需求。Angular Material 是一个流行的前端库，它提供了一些很好的组件来创建响应式和美观的用户界面。在本文中，我们将学习如何使用 Angular ...

    6 年前
  • 使用 $.parseJSON() 和 JSON.parse() 时出现 “Uncaught SyntaxError: Unexpected token o” 的原因是什么？[重复]

    当使用 $.parseJSON() 或 JSON.parse() 解析一个包含非法 JSON 格式的字符串时，就会出现 “Uncaught SyntaxError: Unexpected token ...

    6 年前
  • Change individual markers in Google Maps Directions API V3

    Google Maps Directions API is a powerful tool for displaying route information on maps. By default, ...

    6 年前
  • 如何在 Google Chrome JavaScript 调试器中逐步调试代码

    Google Chrome 的开发人员工具是一个非常强大的 Web 开发工具，它提供了大量的功能来帮助开发者进行调试和分析。其中之一是 JavaScript 调试器，它可以让你逐步调试你的代码以查找错...

    6 年前
  • jQuery实现：当用户滚动页面到特定位置时触发事件

    在前端开发中，有许多场景需要我们在用户滚动页面到达某个特定位置时触发相应事件，比如实现悬浮导航条、无限加载、动态加载等。本文将介绍如何使用jQuery实现当用户滚动页面到达特定位置时触发事件的功能。

    6 年前
  • 在 Backbone.js 中如何判断一个对象是 Model 还是 Collection

    在 Backbone.js 中，Model 和 Collection 是两个核心概念。Model 表示应用程序中的数据模型，Collection 则代表一组 Model 的集合。

    6 年前
  • 如何在多个文件中设置 Mocha 测试用例的执行顺序

    Mocha 是一个流行的 JavaScript 测试框架，它可以帮助我们轻松地编写和运行测试用例。但是，在某些情况下，我们可能需要精确控制测试用例的执行顺序，特别是当我们有多个测试文件时。

    6 年前
  • 如何实现在点击时切换 Font Awesome 图标

    Font Awesome 是一种广泛使用的图标字体库，可以轻松地在网站和应用程序中添加矢量图标。在本文中，我们将学习如何通过 JavaScript 和 CSS 切换 Font Awesome 图标。

    6 年前
  • 什么是 JavaScript 中类似 C# HashSet 的数据结构？

    在C＃中，HashSet是一种常见的集合类型，它允许我们存储唯一元素。在JavaScript中，虽然没有HashSet 类型，但是我们可以使用ES6中引入的Set数据结构来实现类似的功能。

    6 年前
  • 如何使用纯 JavaScript 动态地向现有选择框添加选项

    在 Web 开发中，我们通常需要动态地向现有的选择框（select）中添加选项。这可能是因为我们需要从数据源中加载选项，或者根据用户的输入动态生成选项。在本文中，我们将介绍如何使用纯 JavaScri...

    6 年前

相关推荐

    暂无文章