首页
学习
活动
专区
圈层
工具
发布

单选按钮的用户体验设计

单选按钮是表单系统的一个基本元素。它们被使用在当存在互斥的两个或多个选项列表而用户必须选择其中一个时。换句话说,点选某个尚未选中的单选按钮,之前的选择就会恢复成未选中。...一、单选按钮的名字由何而来 单选按钮的命名源自于旧式汽车中收音机用来切换频道的物理按键—当一个按钮被按下,其他的就会被弹出,留下唯一的按钮处于被选中的状态。...现代软件中的单选按钮正是仿照的这些物理按钮。 二、单选按钮的最佳实践 1、使用单选按钮仅用来设置 使用单选按钮来更改设置,而不是作为操作按钮来执行命令。...5、设法让你的选项列表垂直排列 横向单选按钮有时很难浏览和布局。单选按钮的水平安排使它不容易告诉用户按钮对应的标签:是按钮前面的还是后面的。垂直排列的按钮则更佳安全些。...在例子中,选项是对立的因此使用单选按钮是更好的方案。 设置向导。你应该在向导页面上使用单选按钮使选项明确,即使一个复选框也是可以接受的。一个有默认值的单选设计恩狗给用户一个很好的建议。

8.7K100
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

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

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

    4.9K70

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

    在实际业务开发中,我们常常需要获取用户选择的单选按钮的值,比如用户在注册时选择性别、问卷调查时选择答案等。今天,我们就来聊聊如何在JavaScript中获取单选按钮组的值。...获取单选按钮组的值 在JavaScript中,我们可以使用document.querySelector方法来获取被选中的单选按钮,然后通过它的value属性来获取对应的值。...属性为“gender”的单选按钮元素。....value:通过value属性获取该单选按钮的值。 所以,当我们运行这段代码时,selectedGender的值会是“female”,因为默认情况下“女”按钮是选中的。...结束 在业务开发中,使用JavaScript来获取单选按钮组的值非常简单。我们只需要利用document.querySelector方法来获取被选中的单选按钮,然后通过value属性来获取其值。

    12.4K10

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

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

    8.7K10

    C#索引器的实现、索引器和属性的异同对比,这些技能你get到了嘛?

    在C#中,索引器允许类或结构的实例按照和数组相同的方式进行索引,索引器类似于属性,不同之处在于他们的访问采用参数,而实际上,索引器提供了一种访问类或结构的方法,即允许按照和类、结构或接口相同的方式进行索引...get{//获得属性的代码} set{ //设置属性的代码} } 其中修饰符包括:public,...this关键字引用当前类的实例,从中可以看到,对索引器和对普通属性一样,为它提供set和get访问器,这些访问器指定使用该索引器时将引用什么内部成员。...属性可以作为静态成员或实例成员,索引器必须作为实例成员。 属性的get访问器没有参数,索引器的get访问器具有和索引器相同的形参表。...float this[string name] { //定义get方法对成员进行读取 get { switch

    1.3K20

    Radiobutton

    首先因为单选按钮有一个特性(一个被选中后,自动清除其它按钮的选中状态) 所以使用方式也有点不同 错误示例 from tkinter import * root = Tk() r1 = Radiobutton...这样的话,两个单选按钮其实是“各自独立的” 正确的使用方法 from tkinter import * root = Tk() ButtonList = IntVar() # IntVar 是tkinter...的一个类,可以管理单选按钮 r1 = Radiobutton(root, variable=ButtonList, value=0, text="一号按钮") r2 = Radiobutton(root..., variable=ButtonList, value=1, text="二号按钮") # variable=从属的“管理类” value=索引/ID ButtonList.set(1) # 设置选中的位置...,如果越界则全部均不选中 # 有对应的get属性,用来获取选中项的索引 r1.pack() r2.pack() root.mainloop() 结果 ?

    63020

    bootstrapValidator 中文API

    wangtongxue123456/article/details/77098054 用法 使用插件初始化表单后$(form).bootstrapValidator(options),有两种方法调用插件方法: // Get...参数 类型 描述 field 字符串| jQuery的 字段名称或字段元素如果未定义字段,则该方法将返回所有字段的所有错误消息 validator 串 验证器的名称如果未定义验证器,则该方法返回所有验证器的错误消息...参数 类型 描述 field 字符串| jQuery的 字段名称或字段元素如果未定义字段,则该方法返回表单选项。 validator 串 验证器的名称如果未定义验证器,则该方法返回所有字段选项。...option 串 选项名称如果未定义,则该方法返回给定验证器的选项 getSubmitButton getSubmitButton(): jQuery - 返回显示点击的提交按钮的jQuery元素。...当您想通过单击按钮或链接而不是提交按钮来验证表单时,这很有用。

    14.8K50

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

    今天这篇文章,我们就以 QPushButton 为核心,串联起单选按钮和复选按钮的用法,通过大量实战案例,带大家从 "会用" 到 "精通",真正掌握 Qt 按钮控件的精髓!...如果需要多组单选按钮共存,必须将它们放在不同的父控件(如 QGroupBox)或 QButtonGroup 中。...点击不同的单选按钮,控制台会实时打印状态变化,并且会打印最终选中的性别。...关键知识点 QGroupBox:用于视觉分组,同时自动实现单选按钮的排他性(同一 QGroupBox 中的单选按钮只能选一个); toggled 信号:比clicked信号更适合单选按钮,因为它能直接获取当前选中状态...解决方案:将单选按钮放在同一 QGroupBox 或 QButtonGroup 中,确保setExclusive(true)(默认开启)。 问题 2:无法获取选中的单选按钮?

    39910

    WEB入门之十三 jQuery选择器

    :password​​ 匹配并获得所有密码框 ​​:radio​​ 匹配并获得所有单选按钮 ​​:checkbox​​ 匹配并获得所有复选框 ​​:submit​​ 匹配并获得所有提交按钮 ​​:image​​...匹配并获得所有图片 ​​:reset​​ 匹配并获得所有重置按钮 ​​:button​​ 匹配并获得所有按钮 ​​:file​​ 匹配并获得所有文件域 :hidden 匹配并获得所有隐藏域 下面通过一个示例来演示表单选择器的具体用法...:"+$(":radio").size()); 通过查看图4.1.8,我们能判断出该表单中一共有10个元素,其中文本框1个,复选框3个,单选按钮2个 4.1.4 表单属性选择器 表单属性选择器是对表单选择器的有力补充...​​:even​​ 匹配所有索引值为偶数的元素,从0开始计数 ​​:odd​​ 匹配所有索引值为奇数的元素,从0开始计数 ​​:eq ( index )​​ 匹配一个给定索引值的元素,从0开始计数 ​​...表单选择器和表单属性选择器不能和其他选择器合用 D. :button选择器获得的按钮包括提交按钮和重置按钮 4. 下列关于jQuery选择器中特殊字符的说法错误的是()。

    1.5K10

    WEB入门之十三 jQuery选择器

    :radio 匹配并获得所有单选按钮 :checkbox 匹配并获得所有复选框 :submit 匹配并获得所有提交按钮 :image 匹配并获得所有图片 :reset 匹配并获得所有重置按钮 :button...匹配并获得所有按钮 :file 匹配并获得所有文件域 :hidden 匹配并获得所有隐藏域 下面通过一个示例来演示表单选择器的具体用法 示例4.4 document.write("...:"+$(":radio").size()); 通过查看图4.1.8,我们能判断出该表单中一共有10个元素,其中文本框1个,复选框3个,单选按钮2个 4.1.4 表单属性选择器 表单属性选择器是对表单选择器的有力补充...,从0开始计数 :odd 匹配所有索引值为奇数的元素,从0开始计数 :eq ( index ) 匹配一个给定索引值的元素,从0开始计数 :gt ( index ) 匹配所有大于给定索引值的元素,从0开始计数...表单选择器和表单属性选择器不能和其他选择器合用 D. :button选择器获得的按钮包括提交按钮和重置按钮 4. 下列关于jQuery选择器中特殊字符的说法错误的是()。

    1.4K10

    全网最新、最全的jQuery核心知识,你真的不想点开看看嘛?

    比如:网页中的按钮、文本、盒子等等... 6....$("#id,.class,标签名") jQuery基础知识总结 10.表单选择器 表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单,均可做出相应选择。...表单选择器是为了能更加容易地操作表单, 表单选择器是根据元素类型来定义的 注意:无论是否存在表单,表单选择器都会根据相应的type属性值做出选择。...表单选择器主要是根据 type值进行定位的 只有type属性的标签才具有 表单选择器 索引)") 选择数组中小于指定索引的所有dom对象 语法:$("选择器:lt(数组索引)") 选择数组中大于指定索引的所有dom对象 语法:$("选择器:gt(数组索引)

    8K10
    领券