开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用单选按钮隐藏和显示文本输入

可以通过以下步骤完成：

创建单选按钮：使用HTML和CSS创建单选按钮，可以使用<input type="radio">元素来创建单选按钮，并使用label元素进行标签化。确保为每个单选按钮设置不同的value属性值，并使用相同的name属性将它们分组。
创建文本输入框：使用HTML创建文本输入框，可以使用<input type="text">元素来创建文本输入框。设置一个唯一的id属性，以便在后续步骤中操作该元素。
添加JavaScript代码：使用JavaScript代码来监听单选按钮的选中状态，并根据选择的状态来隐藏或显示文本输入框。可以使用事件监听器（例如click事件）来检测单选按钮状态的变化。
在事件监听器中更新文本输入框的样式：根据单选按钮的选中状态，在事件监听器中更新文本输入框的display属性。当单选按钮选中时，将文本输入框的display属性设置为"block"以显示它，当单选按钮未选中时，将display属性设置为"none"以隐藏它。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .hidden {
      display: none;
    }
  </style>
</head>
<body>
  <input type="radio" name="visibility" value="show" id="showRadio">
  <label for="showRadio">显示文本输入</label>
  <input type="radio" name="visibility" value="hide" id="hideRadio">
  <label for="hideRadio">隐藏文本输入</label>

  <br>

  <input type="text" id="textInput" class="hidden">

  <script>
    const showRadio = document.getElementById("showRadio");
    const hideRadio = document.getElementById("hideRadio");
    const textInput = document.getElementById("textInput");

    showRadio.addEventListener("click", function() {
      textInput.classList.remove("hidden");
    });

    hideRadio.addEventListener("click", function() {
      textInput.classList.add("hidden");
    });
  </script>
</body>
</html>

在这个示例中，当选中"显示文本输入"单选按钮时，文本输入框将显示出来；当选中"隐藏文本输入"单选按钮时，文本输入框将被隐藏起来。通过添加和移除名为"hidden"的CSS类来控制文本输入框的显示和隐藏。

相关搜索:如何使用输入单选按钮显示输入文本？单选按钮显示/隐藏输入都是必需的 Javascript单选按钮显示和隐藏字段如何使用按钮隐藏和显示文本？单选按钮显示文本获取单选按钮的隐藏输入隐藏-使用单选按钮取消隐藏使用单选按钮显示/隐藏表单元素使用Bootstrap隐藏实际单选按钮的显示隐藏单选按钮名称/标签和按钮是否根据单选按钮选择隐藏和显示元素？在单选按钮中输入文本？隐藏按钮和显示重定向文本单选按钮和输入字段隐藏-使用单选按钮取消隐藏div vue.js根据单选按钮选择显示/隐藏输入字段基于单选按钮使用javascript进行剃刀显示/隐藏显示选定单选按钮的输入文本框选择单选按钮后显示/隐藏div RShiny:基于单选按钮隐藏/显示表格

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Online程序学习（二）

八、界面元素 1、按钮在PAI处理结果 2、文本控件 📷 3、输入框控件 📷 4、单选按钮成组设置Funcation Code,将多个单选按钮设置成一组选中需要设置成一组的单选按钮，右键单选按钮组定义 📷 5、复选框默认情况下为不选中（通过赋值实现初始化为选中）可以关联Function Code实现功能 📷 6、显示与隐藏选中复选框时，将输入框隐藏 IF GV_CHECKBOX = 'X'. LOOP AT SCREEN. IF SCREEN-NAME = 'GV_

01

input标签的type属性汇总

1.单行输入框< input type=“text”/> 单行文本输入框常用来输入简短的信息，如用户名、账号等，常用的属性有name、value、 maxlength。

01

HTML（表单）

get：速度较快，但不安全。传输的文本较少；提交的内容会在提交表单之后显示在浏览器的地址栏；不适合密码之类的传输；

01

后台系统设计（上篇：选择）

在单个选项下，存在多组互斥选项，且互斥选项组之间存在一定关系，可以考虑混用分段控件和常规按钮，由于分段控件在视觉上占用更大的面积，故给人在层级上更加置前。

02

matinal：ABAP SELECTION-SCREEN解析

在REPORT 程序中使用生成屏幕控件的语句，会默认屏幕编号为1000（可以手动指定）

02

表单

一.表单　　表单就是一个将用户信息组织起来的容器：　　　　<将需要用户填写的内容放置在表单容器中，当用户单击"提交"按钮的时候，表单会将数据统一发送给服务器> 　　1.表单的内容: 　　　　1）创建表单后，就可以在表单中放置控件以接受用户的输入　　　　2）这些控件通常放在<form></form>标签之间，也可以在表单之外用来创建用户界面　　　　3）不同的表单控件有不同的用途　　 2.表单标签及表单属性　　　　表单的创建：<from>...</from>该标签用于在网页中

09

HTML基础03-HTML标签（下）03-表单标签

使用表单的目的是为了收集用户信息。在网页中，如果需要与用户进行交互，收集用户资料，此时就需要表单。

01

IT课程 HTML基础 013_表单和用户输入

HTML 表单（Form）是 HTML 中非常重要的一部分，它能让用户在网页上输入信息，并将信息提交到服务器。

01

html应知应会

=========================================

01

使用 CSS Checkbox Hack 技术制作一个手风琴组件

在本篇文章里，我们一起学习下如何使用 CSS checkbox hack 技巧制作一个响应式的手风琴组件，这个组件完全基于CSS，没有JavaScript脚本，基于窗口大小进行水平和垂直之间进行切换。为了让大家更好理解，我将和大家一起一步步的进行完成。

03

认识基本的mfc控件

几乎可以在每个windows程序中都看到按钮、复选框、文本框以及下拉列表等等，这些都是控件。而且很多常用的控件已经内置到操作系统当中了，在Visual C++中，这些常用控件已经简答到能用“拖放”这种窗口设计方法来将他们放置到一个对话框中。

02

表单

1.表单控件 1.input标记 1.input标记提供文本输入框，密码输入框，按钮，单选按钮，多选按钮，文件上传框，隐藏域 2.属性 type:类型根据不同的type值，创建不同的输入框 value：输入框的值 name:给输入框起个名字(必须要写) disabled：禁止 3.具体的表单type值 1.文本框 <input type="text"/> 属性: value：输入框的值 maxlength:允许输入的最大长度 readonly:只读 2.密码框 <input type="password"/> 属性: value：输入框的值 maxlength:允许输入的最大长度 readonly:只读 3.单选框 <input type="radio"/> 属性 name属性的值必须一样(必须要加) checked:选中 4.多选框 <input type="checkbox"/> 5.按钮 1.普通按钮:button <input type="button" value="普通按钮"/> value属性 2.提交按钮:submit <input type="submit" value="提交按钮"/> 3.重置按钮:reset <input type="reset" value="重置按钮"/> 6.文件上传框:file <input type="file"/> 2.<textarea></textarea>标记 1.多行文本框 2.语法 <textarea></textarea> 3.属性 name:命名 cols:代表多少列 ----输入框显示做多显示列数 rows:代表多少行 ----输入框显示做多显示行数 readonly:只读 ---- 输入框的内容无法输入 3.select下拉标记 1.语法

03

第十五节：事件实验

3.当用户输入错误时提示。提示“请输入数字”,输入的值可以整数或小数。不能是其它字符

05

常用的表单元素有哪些_h5新增的表单元素属性

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

03

C# 可视化程序设计机试知识点汇总，DBhelper类代码

📷 打开窗体 HotelType ht = new HotelType(); ht.Show();//非模式窗体 ht.ShowDialog();//模式窗体在父窗体中打开子窗体 HotelType ht = new HotelType(); ht.MdiParent = this; ht.Show();//非模式窗体 ht.ShowDialog();//模式窗体退出系统 Application.Exit(); 清空文本框两种方式 this.TextBox.clear(); t

02

8、单选按钮（JRadioButton）和复选框（JCheckBox）

单选按钮（JRadioButton）和复选框（JCheckBox）实现一个单选按钮（或复选框），此按钮项可被选择或取消选择，并显示其状态。JRadioButton对象与ButtonGro

00

串口助手(简洁版)上位机软件零基础教程（ C# + visual studio2017 ）（一）[通俗易懂]

本人所在铁人战队的实验室同学们主要从事单片机的编程开发。但比赛和项目过程中，常常都需要与机器人进行人机交互。虽然实验室常用的HMI串口屏能满足我们的基本需求，但没东西在手的时候，就是个难题了。所以本文则介绍一下使用visual studio软件，进行C#上位机软件的开发入门。以同学们常用的串口助手（简洁版）为例，来着手进行学习和入门。由于笔者知识有限，且是第一次写博客，有不足或错误之处，还请大家指出，方便修改。

02

JavaWeb01轻松掌握HTML（Java真正的全栈开发）

html 一.html介绍: 全称为HyperText Markup Language,译为超文本标记语言，它不是一种编程语言，是一种描述性的标记语言，用于描述超文本中内容的显示方式.比如字体什么颜色

05

JavaSwing:JRadioButton-单选按钮开发详解

与ButtonGroup对象一起使用以创建一组按钮，其中一次只能选择一个按钮。（创建一个ButtonGroup对象，并使用其add方法在该组中包括JRadioButton对象。）

03

HTML标记之Form表单

从访问的Web站点的用户那里获得信息。访问者可以使用诸如文本域、列表框、复选框以及单选按钮之类的表单元素输入信息，然后单击某个按钮提交这些信息。是客户端与服务器端的交流途径。

02

前端(一)-Html

注意：块元素可以嵌套多个行内元素标签，但行内元素不能嵌套块元素，会改变行内元素的布局，且标签之间不可以交叉；

02

8 个 DOM 功能

你肯定用 addEventListener() 处理过将事件附加到 Web 文档中的元素。通常 addEventListener() 调用看起来像这样：

02

JavaSwing_2.3: JRadioButton（单选按钮）「建议收藏」

本文链接: http://blog.csdn.net/xietansheng/article/details/74363379

04

Python 图形化界面基础篇：添加单选按钮（ Radiobutton ）到 Tkinter 窗口

在 Python 图形化界面基础篇的这篇文章中，我们将专注于 Tkinter 中如何添加单选按钮（ Radiobutton ）。单选按钮是一种用于选择一个选项的 GUI 元素。无论是用于设置应用程序的选项、进行单项选择还是对数据进行过滤，单选按钮都是非常有用的。在本文中，我们将详细解释如何在 Tkinter 窗口中添加单选按钮，并如何获取用户所做的选择。

07

Axure RP9中文版，交互式原型设计软件Axure RP 9永久版下载安装

Axure RP是一款来自美国Axure Software Solution公司的旗舰产品，它是一款专业的快速原型设计工具。使用它，你可以快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。无论你是负责定义需求和规格、设计功能和界面的专家，还是一名初学者，Axure RP都能够满足你的需求。

04

PHP Web表单生成器案例分析

在项目的实际开发中，经常需要设计各种各样表单。直接编写HTML表单虽然简单，但修改、维护相对麻烦。因此，可以利用PHP实现一个Web表单生成器，使其可以根据具体的需求定制不同功能的表单。具体实现需求如下：

01

软件测试|超好用超简单的Python GUI库——tkinter（十一）

我们在使用音乐播放软件时，我们想选择播放模式时，我们只能在随机播放，单曲循环，列表循环三种方式中选择一个，这就是我们常见的单选的情况，我们在设计我们的GUI时，也有可能遇到单选的情况，tkinter也同样给了我们实现单选的控件——Radiobutton，本文就给大家介绍一下单选框控件Radiobutton的使用。

01

在 Vue 中创建自定义输入

基于组件的库或框架（如 Vue ）可以创建可重用组件，它能在各自应用程序中相互传递数据，这些框架能确保这些数据是一致的，并且（希望）简化了它们的使用方式。

02

Tkinter之Menu组件用法原

开发工具类桌面应用使用Python、Java这类语言是一种不错的选择，他们的GUI库都可以很好的支持跨平台特性。本系列博客主要总结Tkinter库中提供的UI组件，关于Java的GUI开发，感兴趣的可以在如下系列博客中找到：

02

【Java 进阶篇】深入了解HTML表单标签

HTML（Hypertext Markup Language）表单标签是网页开发中的重要组成部分，用于创建各种交互式元素，允许用户输入、提交和处理数据。本文将深入探讨HTML表单标签，包括如何创建表单、各种输入元素、表单属性以及一些最佳实践。无论你是初学者还是有经验的开发人员，都能从本文中学到有关HTML表单的关键知识。

01

Java GUI编程11—单选按钮：JRadioButton

单选按钮就是在给定的多个选择项中选择一个，并且只能选择一个。在Swing中可以使用JRadioButton完成一组单选按钮的操作，JRadioButton的常用方法如下表。

02

Mockplus实例之一看就会de五个交互功能

实例来源：豆瓣新加日记（https://www.douban.com/note/create）先看看豆瓣新加日记的网页：再看看已经制作好的原型预览页面：在原型制作中有五个有特色的交互功能：

06

Kotlin学习日志（六）控件使用

学习最重要的就是坚持了，笨鸟多飞，业精于勤荒于嬉，学如逆水行舟，不进则退。前面学了那么多关于函数、语法、类这些知识，确实是比较枯燥，但却是有必要的，因为这些都是在进行业务实现需要的，举个例子，常规功能，登录。你有想过需要哪些业务逻辑处理吗？你不会以为输入账号密码就没事了吗？当然不是，登录首先是页面的布局处理，通常的是输入框和按钮的搭配，当然有的会有图形验证码，手势验证码，或者滑动验证等验证手段，最简单的就是只有账号和密码的登录，但是账号和密码也是要做限制的，登录的时候首先做非空判断，输入类型限制，比如账号指定是纯数字、还是数字加字母，一般来说是纯数字的，纯数字要限制多少位数，如果是手机号的话需要用正则表达式来验证是否为正规的手机号，总不能你输入个13888888888，我都能让你登录上去吧，那这个程序员也要开除，其次就是登录的时候与后台的数据库进行查询对比，假如没有这个手机号是不是还要先注册呢？然后密码当然不能明文显示，也不能明文传输啊，也不能是纯数字或者纯字母，特殊符号什么的，这里又涉及到了密码的安全登录，常见的是三级，纯数字是不行的，这一步你在注册的时候就过不去，然后是最短和最长的密码位数限制，一般来说最短8位最长18位，然后就是传输过程加密，后台对比数据库的值是否一致，一致再允许登录，进一步的出来就是登录过程中的网络处理了，网络请求多长时间，网络异常，等一些问题的处理，但是在用户眼里就是一个简单的登录而已，所以任何功能的设定都没有你实际看上去的那么简单，如果你想的过于简单的话，都不用到客户，测试就能玩死你，你信不信？好了，废话说的有点多了，接下来进入正题，Kotlin中控件的的使用。

03

前端学习自学笔记：day03

嗯,说实话,我写这个的话比较少人看啊,但是还是继续坚持下去吧,可不可能半途而废啊,接下来是第三天的笔记. 📷 在此之前先为大家显示下前端工程师的路线图: 第三天的笔记:HTML AND CSS: 早上所学的： 1.无序列表：从元素开始，并包含一个或多个元素。例： milk cheese 2.有序列表：从元素开始，并包含一个或多个元素。例： Garfield Sylvester 3.创建一个表单（form） Text input(文本输入框)，例：注意：input元素是自关闭的。占位符（plac

05

django 1.8 官方文档翻译：5-1-4 内建的Widget

Widget 是Django 对HTML 输入元素的表示。Widget 负责渲染HTML和提取GET/POST 字典中的数据。

04

python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例

QRadioButton 继承自 QAbstractButton，其主要作用提供用户一些互斥的按钮。

04

AWT常用组件

推荐一个网站给想要了解或者学习人工智能知识的读者，这个网站里内容讲解通俗易懂且风趣幽默，对我帮助很大。我想与大家分享这个宝藏网站，请点击下方链接查看。 https://www.captainbed.cn/f1

01

HTML表单

创建一个表单 HTML中表单的创建使用<form>标签（双标签） <form method="post" action="index.html"></form> method="post" 指的是表单提交方式，常用值 get | post get：速度较快，但不安全。传输的文本较少；提交的内容会在提交表单之后显示在浏览器的地址栏；不适合密码之类的传输； post：速度慢，但是安全。与get相反。适合用于注册表单、登录表单之类的传输。 action="index.html"指的是表单提交成功后要跳转的页面。

02

回顾基础--HTML篇

01

HTML学习笔记二

< input >标签元素最重要的是表单元素，标签根据不同的 type 属性，有多态性。

02

HTML.Label

如果用户单击 label，浏览器会把焦点传送给相关的输入控件，这一点对于复选框和单选按钮特别有用，

01

HTML的基本语法以及如何使用HTML来创建网页

HTML代表超文本标记语言（Hypertext Markup Language）。它是一种用于构建网页的标记语言。HTML文件包含一组标签，这些标签用于定义网页的结构和内容。浏览器读取HTML文件，并根据标记中的指示呈现网页内容。

04

【译】W3C WAI-ARIA最佳实践 -- 表单

三态复选框的一种常见使用场景是在软件安装时，一个单独的三态复选框用来代表和控制整个安装选项组的状态。并且，该组中的每个选项都可以单独使用双态复选框开启或关闭。

03

html学习笔记第二弹

表格标签的作用：主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。

01

单选按钮的用户体验设计

单选按钮是表单系统的一个基本元素。它们被使用在当存在互斥的两个或多个选项列表而用户必须选择其中一个时。换句话说，点选某个尚未选中的单选按钮，之前的选择就会恢复成未选中。正确的使用单选按钮会非常好—

Axure RP8入门之基本操作篇

格式说明：“Password”表示主要用途；“Input”表示元件类型，一般情况下可省略，当有不同类型的同名元件需要区分或名称不能明确表达用途的时候使用；“01”表示出现多个同名元件时的编号；单词首字母大写的书写格式便于阅读。

03

Extjs-lesson4

Ext.js 系列课程笔记「表单子项」更多精彩文章请关注公众号『Pythonnote』或者『全栈技术精选』

01

【黑马程序员pinik名师讲html】HTML很容易忘记?有它我不慌的

下面要讲的vscode自动生成,基本不用我们自己写,但是需要了解每一个代码的意思和作用

02

Qt Designer基本控件介绍——按钮

Push Button ：最普通、常见的按钮当按钮被点击就会发出clicked信号 button.clicked.connect(handleCalc) Tool Button ：工具按钮，一般在工具栏中显示，工具栏中的工具按钮一般只显示图标可以通过setToolTip()来设置提示文本详细介绍可看博客“pyQt5 学习笔记（14）QToolButton 工具按钮控件” button.setToolTip("这是一个菜单工具图标") [当光标移动到这个工具按钮上，就会显示一个文本来提示用户] Radi

03

Android widget之CompoundButton[通俗易懂]

实现方法：onCheckedChanged（ CompoundButton buttonView，boolean isChecked）

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭