web-dev-qa-db-ja.com

使いやすさに関するすべてのチェックボックスをオン/オフにします

チェックボックスの列を持つ複数の行を持つHTMLテーブルにすべての機能のチェック/チェック解除を提供する最良の方法についてのあなたの考えについて考えているところです。

いくつかの可能性:

Gmailと同様に、表の見出しに追加のチェックボックス。例えば_[ ] Is enabled?_

表の見出しのすべてのリンクを確認してください。例えばIs enabled? (check all)

チェックボックスのすぐ下にあるテーブルフッターのすべてのリンクをチェックします。

19
bcmcfc

私はこのアプローチが自明であると思います( "Select all"の必要はありません):

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

ただし、ここのキーワードは「I find」です! @ ChrisF彼の答え にはいくつかの良い点がありますが、異なるアプローチを実際のユーザーと比較する必要があると思いますどのソリューションが最適であるかを見つけるため。

ただし、示されているアプローチに関するいくつかのポインタ:

  • すぐに対応してください。つまり、ユーザーの期待に応えるために、すべてのボックスのチェックを外したり、クライアントで即座にチェックを外したりする必要があります(往復や遅延フォームの送信は不可)。
  • 「すべて選択」UIウィジェットは、各アイテムのものと同じにします。それはまだチェックボックスです-これは列全体に影響するだけです(したがって列見出しに配置されます)。

[〜#〜]編集[〜#〜]

12
jensgram

すべてをチェックし、すべてのチェックを外すとアクションになります。そのため、アクションの表現方法、つまりボタンとして表現する必要があります。

これをコメントとして別の回答に投稿しましたが、チェックボックスを使用することが悪い考えである理由を説明するために、ここに含めたいと思います。

「すべてをチェックする」チェックボックスを使用することの問題は、それが何を表すのですか?ヘッダーのチェックボックスをオフにするとどうなりますか?すべてオフにしますか?以下の項目のいずれかをオフにするとどうなりますか?ヘッダーのチェックボックスをオフにしますか?すべてのアイテムを個別にチェックするとどうなりますか?ヘッダーのチェックボックスをチェックしていますか?チェックボックスは、適切なソリューションになるための意味を適切に伝えていません。

ボタン(またはリンク)が何をするのかを示すため、混乱の余地はまったくありません。考えることは何もありません。私たちの仕事の目的は、システムの基本的な機能を考えずに実行できるようにすることです(したがって、実行中の実際の機能に脳力を使用できます)。

12
Charles Boyung

私は上部のシンプルなチェックボックスが好きでした、それの良いところは経験です、ほとんどの人はそれが何をしているのかを知っています、そして彼らがそれをしない場合はワンクリックで見つけることができます...しかし、linkinが何かをするのを見ましたきちんとした:

enter image description here

7
Ayyash

ヘッダー(またはフッター)に追加のチェックボックスを含めることは、より直接的なアプローチです。このオプションは、参照する列と密接に関連しています。これは、複数のチェックボックス列がある場合に特に役立ちます。

これの欠点は、アクションがすべてのユーザーにすぐにわかるとは限らないことです。

[すべて選択/選択解除]リンクはより明確で、必要に応じて説明テキストを含めることができますが、ページが長くなります。

6
ChrisF

GMailでGoogleが行った興味深いアプローチである「すべてをチェック/チェック解除」も、追加オプションのあるドロップダウンメニューです。グレー表示されている場合は、「一部がチェック済み」の状態です。

1
Evgeny