复选框 Checkbox
管理员为成员配置项目权限,查看、编辑和导出可以按需组合,而不是互相替换。
前端与交互约 10 分钟 · 从真实需求理解
1为什么多个选项能一起成立?
这个成员可以做什么?
Checkbox 把一组选择拆成多个彼此独立的 checked 状态。勾选编辑权限不会替换导出权限,页面可以同时保存这些成立的条件。
判断它时先问每个选项是否可以和其他选项同时为真;如果可以,用户需要看到每一项自己的状态,而不是一个只能留下单值的选择器。
2Checkbox 和 Radio 的分界在哪里?
Checkbox 适合多个独立答案同时成立;Radio 适合一组互斥答案只能留下一个。外形都能配上文字,但它们对旧选择的处理方式完全不同。
- 如果勾选第二项后第一项仍然有效,选项之间就是独立关系。
- 如果改选第二项就必须清掉第一项,页面需要的是 Radio 的单选关系。
不要用“有几个方框”做判断;先写出用户的答案能否同时成立,再决定控件。
3一个 Checkbox 组由哪些真实部分组成?
这个成员可以做什么?
一个可理解的 Checkbox 组至少要把组的语境、真实 input、对应 label 和 checked 指示连起来。每个选项都应能独立操作,也应能独立被读出当前状态。
- fieldset 或等价的组语境说明这几项属于同一个问题,但不把它们合并成一个值。
- 真实 input[type=checkbox] 承担 checked、键盘 Space 切换和可访问名称。
- label 文字要和对应 input 绑定;方框与勾号只是状态的可见证据。
4Checkbox 的选择状态
未选中
已选中
半选
同一组 Checkbox 可能需要表达单项未成立、单项成立,或父级只覆盖了部分子项;这些状态必须通过控件本身被看见。
5Checkbox 在真实页面里怎样共同承担任务?
选择这次报表需要的字段
客户名称保留客户识别信息
订单金额保留金额汇总
负责人本次暂不导出
导出报表
| 选择 | 主题 | 收到时间 |
|---|---|---|
| 周报摘要 | 今天 09:10 | |
| 评审意见 | 昨天 16:40 | |
| 活动邀请 | 周一 |
Checkbox 的共同责任会出现在报表列、日历筛选和批量归档等不同页面:每一项可以单独改变,但多个 checked 仍然能共同影响当前任务。
6什么时候该用 Checkbox?
多个字段都可能进入同一份导出文件。
改选会替换旧答案,应使用 Radio。
单一二态设置用 Switch 更直接。
自动保存已开启
先判断答案关系:多个答案可以同时成立时用 Checkbox;只能留一个答案时用 Radio;单一设置只有开和关时用 Switch。
7怎样把 Checkbox 需求告诉 Agent?
请在成员权限区域使用真实 Checkbox:查看、编辑、导出是三个可以独立成立的权限,允许多个 checked 同时保留;每项都要有可理解的 label,支持 Tab 和 Space,并让键盘和鼠标得到相同的状态反馈。请不要把它改成只能留下一个答案的 Radio,也不要额外生成选择计数栏。
8不用背,看看你能不能判断
1 / 3
查看权限和导出权限都可能成立时,哪种控件关系更合适?
请选择一个最符合题意的答案
社区延伸
看别人真实遇到过什么
社区帖子还没有关联到这个词条。