根据一个单选按钮的状态灰显另一个单选按钮 - 腾讯云开发者社区

文章/答案/技术大牛

发布

单选按钮的用户体验设计

单选按钮是表单系统的一个基本元素。它们被使用在当存在互斥的两个或多个选项列表而用户必须选择其中一个时。换句话说，点选某个尚未选中的单选按钮，之前的选择就会恢复成未选中。...一、单选按钮的名字由何而来单选按钮的命名源自于旧式汽车中收音机用来切换频道的物理按键—当一个按钮被按下，其他的就会被弹出，留下唯一的按钮处于被选中的状态。...同时,改变的设置不应该在用户点击命令按钮(标记为“前进”或“保存”为例)前生效。如果用户点击返回或取消按钮，任何在该单选按钮组所做的更改都应该被丢弃而且回到初始状态。...4、通常给一个默认选项 UI设计的十原则之一告诉我们用户应该能够取消或重做他们的行为。这意味着通过UI控制应该能够让用户会到初始状态。在单选按钮的情况下，这意味着单选按钮应该预先选择一个选项。...在例子中，选项是对立的因此使用单选按钮是更好的方案。设置向导。你应该在向导页面上使用单选按钮使选项明确,即使一个复选框也是可以接受的。一个有默认值的单选设计恩狗给用户一个很好的建议。

8.8K10 0

iOS 单选按钮组--只能而且必选一个按钮

在iOS开发中有时我们会用到这种单选按钮组，只能而且必选一个按钮， ? 屏幕快照 2016-08-30 13.53.43.png ?...屏幕快照 2016-08-30 13.53.37.png 其实也非常简单 **1、定于两个属性按钮** @property (nonatomic, strong) UIButton * sinaButton...; @property (nonatomic, strong) UIButton * bankButton; 2、初始化并默认一个选项，这里用了4个button，实际可以采用2个，因为写一半才发现后面的汉字也要设置成可点的...bankAction:) forControlEvents:(UIControlEventTouchUpInside)]; [self.view addSubview:banknameSelete]; // 先默认一个选项..._bankButton.selected = YES; _sinaButton.selected = NO; } NSLog(@"银行卡"); } 这样就完成了简单的单选按钮组

5.4K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

Flat风格的Qml单选复选按钮

使用Qml的RadioButton与CheckBox控件修改而成。...单选按钮 RadioButton代码 import QtQuick 2.0 import QtQuick.Controls 2.0 RadioButton { id: root property...text: "Radio Button 3" checkedColor: modelData } } } } 复选按钮

3.6K2 0

单选按钮的取消与选中原

单选一...单选二...-- 第一点击时传入单选对象，执行else,把这个对象赋给tempradio，第二次点击时checkedRadio这个对象就等于tempradio这个对象，执行if tempradio.checked...=false; 又把tempradio 赋值为null, 然后不停的循环--> 在一个form中的单选按钮，同一个name都会只选中一个。

5.2K2 0

Flutter中的单选按钮组件Radio

Flutter 中的单选按钮组件有两种。 1. Radio 单选按钮，一般用来表现一些简单的信息。...常用属性如下： (1). value 单选的值； (2). onChanged 选择改变触发的事件； (3). activeColor 选中时的颜色； (4). groupValue 多个按钮选择组的值...RadioListTile 包含更多信息的单选项，提供多种配置信息的属性，可以表现更丰富的信息。...常用的属性如下： (1). value 单选的值； (2). onChanged 选择改变触发的事件； (3). activeColor 选中时的颜色； (4). groupValue 多个按钮选择组的值...Text("男"), Radio( // 按钮的值

12.3K2 0

JavaScript中的排他算法实现按钮单选

JavaScript中的排他算法实现按钮单选演示效果概述简介：通过排他算法，我可以实现每次点击按钮，然后只有一个会亮。...获取所有按钮元素 var btns = document.getElementsByTagName('button'); // btns得到的是伪数组里面的每一个元素...btns[i].style.backgroundColor = ''; } // 然后再设置被选中的按钮的颜色...获取所有按钮元素 var btns = document.getElementsByTagName('button'); // btns得到的是伪数组里面的每一个元素...btns[i].style.backgroundColor = ''; } // 然后再设置被选中的按钮的颜色

2.2K1 0

python的tkinter编程（十）Radiobutton单选按钮，CheckButton复选按钮的详细解读

Radiobutton单选按钮 CheckButton复选按钮

2.9K2 0

微信小程序–单选复选按钮组的实现

大家好，又见面了，我是你们的朋友全栈君。本文主要介绍微信小程序单选按钮很多选按钮的实现方式。...众所周知，小程序目前无法绑定DOM截点，实现的原理就是通过bindtap点击的事件方法获取data-id进行循环遍历取反而实现该效果。...（一）单选按钮组模型图如下： index.js Page({ data: { parameter: [{ id: 1, name: '银色' }, { id: 2, name:...this.data.parameter[0].checked = true; this.setData({ parameter: this.data.parameter, })//默认parameter数组的第一个对象是选中的...}, // 参数点击响应事件 parameterTap:function(e){//e是获取e.currentTarget.dataset.id所以是必备的，跟前端的data-id获取的方式差不多

3.5K2 0

安卓开发_单选按钮控件（RadioButton）的简单使用

最近复习安卓基础的时候发现没有写关于单选按钮、复选按钮的博客，可能因为以前学习的时候感觉太简单了就没有写，现在补上吧当我们在各种客户端注册账号的时候，会有几项单选项，比如选择您的性别。...下面就是学习怎么实现这种效果一、安卓中，单选按钮用RadioButton表示，因为RadioButton是Button的子类，所以可以使用Button的各种属性 RadioButton一般是不单独使用的需要结合...RadioGroup控件一起使用，将若干个RadioButton放在一个RadioGroup中，那么将只能选择RadioGroup中的某一个RadioButton 比如讲语文、数学，英语放在“你最喜欢的课程中...{ 53 RadioButton r = (RadioButton)radiogroup.getChildAt(i); //根据索引值获取单选按钮...Toast.makeText(Ui_RadioButton.this, "点击提交按钮时获取的单选按钮的值为:"+str, 1).show(); 59 break

5K7 0

如何在JavaScript中获取单选按钮组的值？

在实际业务开发中，我们常常需要获取用户选择的单选按钮的值，比如用户在注册时选择性别、问卷调查时选择答案等。今天，我们就来聊聊如何在JavaScript中获取单选按钮组的值。...实际业务场景假设我们正在开发一个用户注册页面，用户需要选择他们的性别。我们使用了一组单选按钮来表示性别选项。...获取单选按钮组的值在JavaScript中，我们可以使用document.querySelector方法来获取被选中的单选按钮，然后通过它的value属性来获取对应的值。...属性为“gender”的单选按钮元素。...结束在业务开发中，使用JavaScript来获取单选按钮组的值非常简单。我们只需要利用document.querySelector方法来获取被选中的单选按钮，然后通过value属性来获取其值。

14.1K1 0

checkbox(复选框)和radio(单选按钮)的区别与详解

选中和取消选中一个 checkbox(复选框) 后，再次点击它，即可取消选中选中一个 radio(单选按钮) 后，再次点击它，不能取消选中的 checkbox 被选中如果要实现只能同时选中一个 checkbox，可以用 js 代码来控制也就是说，checkbox 所谓的“单选”是不受其 name...默认情况下（不设置name属性时），也是点了几个 radio 就有几个 radio 被选中，并且选中后再次点击不可取消选中，除非重置或者刷新页面等但 radio 既然是单选按钮，肯定是可以实现单选的操作的...，这时只要设置每个 radio 的 name 属性的值一样就可以实现单选操作，也就是始终只会有一个 radio 被选中要实现 radio 的多选操作，除了前面说的默认情况以外，还可以通过设置其...name 属性的值不相同来实现如果有三个 radio 按钮，前两个的 name 属性的值是一样的，但第三个和前两个不一样，则前两个 radio 按钮，只能同时选中一个，第三个 radio 按钮可以和第一个或第二个同时被选中

8.8K1 0

前端Vue监听路由变化，点击页面内按钮跳转菜单更改导航菜单选中状态

实际项目开发中有时候需要根据路由的变化去实进行一些操作，在此，我总结了三种方法。...只需添加一个具有唯一值的 key 属性即可(Vue文档原话) 使用computed属性和Date()可以保证每一次的key都是不同的，这样就可以如愿刷新数据了。...组件实例还没被创建 }, beforeRouteUpdate (to, from, next) { // 在当前路由改变，但是该组件被复用时调用 // 举例来说，对于一个带有动态参数的路径...`this` } 使用场景：点击页面内跳转按钮导航菜单选中在element中有个NavMenu 导航菜单组件在A菜单页面中，有一个按钮button组件，...虽然页面已经跳过去了，但是导航菜单的选中状态并没有发生改变，还在A菜单上面。也就是default-active，还停留在A上。此时就可以在导航菜单的组件中去监听router。

7.9K2 1

为番茄钟应用设计一个平平无奇的状态按钮

为什么需要设计一个状态按钮 OnePomodoro应用里有个按钮用来控制计时器的启动/停止，本来这应该是一个包含“已启动”和“已停止”两种状态的按钮，但我以前在WPF和UWP上做过太多StateButton...颇有花花公子玩腻了找个良家结婚的意味。但两个按钮实际用起来很不顺手，手感也不好，尤其状态切换时会有种撕裂的感觉，越用越不爽，最后还是花时间又做了一个状态按钮PomodoroStateButton。...PomodoroStateButton的ControlTempalte中最核心的是一个Polygon，在计时器启动和停止之间按钮图标需要改变它的形状，本来是三角形，需要被用户变成正方形的形状。...XAML，应用了ButtonRevealStyle样式的按钮有很复杂的外观，但它的Style写得倒很简洁，这是因为它把状态传递给RevealBrush由它去处理动画（还有PointerDownThemeAnimation...结语这样一个手感还不错，看上去很收敛实际上用了一大堆代码的状态按钮就完成了，使用了两个月下来感觉手感还算好，而且很容易和各种主题的番茄钟搭配。可以安装我的番茄钟应用试玩一下，安装地址：一个番茄钟

9890 0

Android Drawable 如何添加一个自定义的按钮状态

增加状态的过程如下： >定义状态数组 >重写protected int[] onCreateDrawableState(int extraSpace) >调用refreshDrawableState...resources> 定义控件 public FoodButton(Context context, AttributeSet attrs) { super(context, attrs); } //定义状态数组

2.6K2 0

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

常见类型： ·单选按钮 ·复选框 ·图标切换 ·切换开关 ·穿梭框/列表构造器 ·下拉菜单一、单选按钮允许用户从一组相互排斥的选项中选择一个。通常，将一个选项定义为默认选择。外观常规： ?...·在用户与单选按钮交互时，请提供良好视觉反馈，且按钮本身状态提供良好的能供性（默认、悬停、选中和禁用）。...·如果只有一个复选框，可以根据表单格式选择使用标签、文本或组合；如果有多个复选框，标签将描述整个复选框，而文本则是表述各自的选项。 ?...·在用户与复选框交互时，请提供良好视觉反馈，且按钮本身状态提供良好的能供性（默认、悬停、选中、禁用和未全选状态）。讨论：仅有两个互斥的选项（二元）是选择单选按钮还是复选框？...三、Icon button 图标按钮图标按钮可以说是结合了单选按钮、复选框及命令控件的变形形式，性质上存在互斥（单选）和非互斥（多选）。

13.8K2 1

vue - 使用vue实现自定义多选与单选的答题功能

flag：今天先专注把我费劲巴拉手动搬得砖总结一下，明天（07-05）我再把所谓的最简单的方法做出来贴这里~ 这个需求的难点在于以下几点： 1．单选点击后选中状态，需满足如下：　　a) 每次点击只能选中其中一个...) 4．单选选中项的记录，方便提交数据 5．未点击选项不可提交，并给提示 6．可提交状态，需满足如下：　　a) 单选选中任意一个，即可提交。...也就是以上难题中的第一个难题的前半部分：单选点击后选中状态。 ? ? ? 费这么半天劲，才解决一个点啊！我不服！别急，接下来还有好戏。...这里有一个用于描述按钮是不可点击状态的变量unclickable，专门管理按钮是否是可点击的。初始化时是true不可点击的。这样，按钮的gray类名public-btn-gray就加了。...定义一个变量isClicked专门用于看管按钮是否被提交过，如果在可点击的状态下点击过，那么抱歉，逻辑中断！

4.4K2 0

从零开始的Qt开发指南：（七）Qt常用控件之按钮类控件深度解析：从 QPushButton 到单选复选的实战指南

从功能上看，QPushButton 就像一个 "万能开关"，既可以触发一次性操作（比如提交表单、关闭窗口），也能实现复杂的状态切换（比如开关按钮、连发按钮），几乎所有带交互的 Qt 界面都能看到它的身影...（默认 16x16，可根据按钮大小调整）状态控制 isEnabled() / setEnabled(bool enabled) 获取 / 设置按钮是否可用（禁用时按钮变灰，无法响应操作） isCheckable...） setAutoExclusive(bool exclusive) 设置是否自动排他（默认 true，同一组中只能选一个） toggled(bool checked) 信号：当单选按钮的选中状态变化时发射...点击不同的单选按钮，控制台会实时打印状态变化，并且会打印最终选中的性别。...关键知识点 QGroupBox：用于视觉分组，同时自动实现单选按钮的排他性（同一 QGroupBox 中的单选按钮只能选一个）； toggled 信号：比clicked信号更适合单选按钮，因为它能直接获取当前选中状态

5791 2

Material Design — 菜单（Menus）

菜单菜单的形式是在短暂的动作条上展示选项列表。菜单出现在与按钮，操作或其他控件的交互中。菜单显示的是一个一行只有一个选项的选项列表。如果不适用于某个情景，菜单项可能被禁用。...情景中的菜单应该根据app的当前的状态动态地更改其中的菜单选项。...左：应用栏中的操作太多时将会设置一个菜单右：包含五个选项的菜单菜单标签按钮或控件的标签应该简洁而准确地反映菜单内的项目（如下图）。...其他上下文可能需要更长的标签。禁用菜单选项菜单显示一组一致的菜单项。菜单项可以根据应用程序的当前状态启用或使其不可用（例如置灰）。 ?...·与当前情景无关的菜单项可能会被删除 ·与情景相关但需要满足某些条件的菜单项可能被禁用（如置灰）。例如，当选择文本后，“复制”这个菜单选项才变为可选择项。

8K10 0

Matlab系列之GUI设计基础

如果为单选按钮或复选框指定 CData 属性，则图像可能与文本字符串重叠。另外，为单选按钮或复选框指定图像会禁用在选择或取消选择它们时显示的功能。...： •如果为复选框、按钮、单选按钮或切换按钮指定一个元胞数组，则 MATLAB 仅显示元胞数组中的第一个元素。...以下是可能的值： •'on' – 控件处于工作状态。 •'off' – 控件未处于工作状态，并且呈灰显。...当用户在其上点击并释放鼠标按钮时，状态发生变化。 'radiobutton' 可具有两种状态（选择和取消选择）的按钮。单选按钮在一组相关的单选按钮中有意安排为互斥。 'edit' 可编辑的文本字段。...Interruptible 属性具有下列两个可能的值： •'on' - 运行中回调可以被另一个回调中断。

8.3K1 0

Swing常用组件

JRadioButton(Icon icon, boolean selected)：创建一个指定图标和选择状态的单选按钮。...JRadioButton(String text, boolean selected)：创建一个指定文本和选择状态的单选按钮。...JRadioButton(String text, Icon icon, boolean selected)：创建一个指定文本、图标和选择状态的单选按钮。...以上是JRadioButton类的一些常用成员方法，可以通过调用这些方法来操作和控制单选按钮的状态和行为。...然后，我们创建了两个按钮，一个用于添加项目，另一个用于删除选定的项目。当点击添加按钮时，会弹出一个对话框，要求用户输入新项目的名称，并将其添加到列表中。当点击删除按钮时，会删除选定的项目。

4.5K1 0

点击加载更多

单选按钮的用户体验设计

iOS 单选按钮组--只能而且必选一个按钮

Flat风格的Qml单选复选按钮

单选按钮的取消与选中原

Flutter中的单选按钮组件Radio

JavaScript中的排他算法实现按钮单选

python的tkinter编程（十）Radiobutton单选按钮，CheckButton复选按钮的详细解读

微信小程序–单选复选按钮组的实现

安卓开发_单选按钮控件（RadioButton）的简单使用

如何在JavaScript中获取单选按钮组的值？

checkbox(复选框)和radio(单选按钮)的区别与详解

前端Vue监听路由变化，点击页面内按钮跳转菜单更改导航菜单选中状态

为番茄钟应用设计一个平平无奇的状态按钮

Android Drawable 如何添加一个自定义的按钮状态

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

vue - 使用vue实现自定义多选与单选的答题功能

从零开始的Qt开发指南：（七）Qt常用控件之按钮类控件深度解析：从 QPushButton 到单选复选的实战指南

Material Design — 菜单（Menus）

Matlab系列之GUI设计基础

Swing常用组件

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐