it-swarm.cn

选中所有/取消选中所有与可用性有关的复选框

我只是想知道您对提供检查/取消检查具有多行(具有一列复选框)的HTML表的所有功能的最佳方法的想法。

一些可能性:

表格标题中的额外复选框,类似于Gmail。例如_[ ] Is enabled?_

检查表标题中的所有链接。例如Is enabled? (check all)

直接在复选框下方检查表格页脚中的所有链接。

19
bcmcfc

我发现这种方法很容易解释(不需要“ 全选”):

screenshot
(来源: http://www.ibm.com/developerworks/web/library/wa-jquery1/

但是,这里的关键字是“ 我发现“! @ ChrisF他的回答 中有一些优点,但是我想您必须将不同的方法与真实用户进行比较才能找到哪种解决方案最合适。

不过,有关所示方法的一些提示:

  • 立即做出响应。即,应在客户端上立即取消/选中所有复选框(不得往返或延迟提交表单),以满足用户的期望。
  • 让“全选” UI小部件与每个项目的UI小部件相同。它仍然是一个复选框-这只会影响整个列(因此位于列标题中)。

[〜#〜]编辑[〜#〜]

12
jensgram

选中所有复选框,然后取消选中所有复选框。因此,应该以表示动作的方式表示它们:按钮。

我将其作为评论发布在另一个答案中,但我想在此处包括它,以说明使用复选框是一个坏主意的原因:

使用“全部选中”复选框的问题是什么?取消选中标题复选框会发生什么?是否取消所有选择?取消选中以下项目之一会发生什么?是否取消选中标题复选框?单独检查所有项目会怎样?它会检查标题复选框吗?复选框未正确传达其含义,因此无法成为一个好的解决方案。

声明其操作的按钮(或链接)绝对不会造成混淆。没什么可考虑的,我们的工作目的不是要做到这一点,这样系统的基本功能就可以不加思考地完成(因此可以将脑力用于执行的实际功能)吗?

12
Charles Boyung

我以前喜欢顶部的简单复选框,它的经验是什么,几乎每个人都知道它的作用,如果他们不这样做,则只需单击一下就可以知道...但是,我已经看到linkedin在做一些事情整齐:

enter image description here

7
Ayyash

在页眉(或页脚)中有额外的复选框是一种更直接的方法。该选项与其所引用的列紧密链接,如果您有多个复选框列,则该选项特别有用。

不利的一面是,该操作可能并非对所有用户都立即显而易见。

“全选/取消全选”链接更加明确,可以添加一些说明性文字(如有必要),但是它会使页面更长。

6
ChrisF

由Google在GMail中完成的有趣方法,“全部选中/取消选中”也是一个带有其他选项的下拉菜单。变灰时处于“已检查某人”状态。

1
Evgeny