web-dev-qa-db-ja.com

多くのチェックボックスの代替

ユーザーがリストからオプションのサブセットを選択(オン/オフ)できるようにする必要があります。これらの選択肢は100以上あり、リストは長くなります。データもユーザーフレンドリーではありません。それらは、長さがおよそ4〜8文字の英数字コードであり、覚えることは事実上不可能です。基本的に、これらのコードのサブセットを簡単に選択できるようにする必要があります。

これがユーザーにとって楽しいタスクになるとは想像できませんが、チェックボックスの代わりに、よりユーザーフレンドリーな方法はありますか?

わかりやすくするために、コードはユーザーがサポートできるようにしたいデバイス(i-1000など)用です。

5

Chosen と呼ばれるこの優れたjqueryプラグインを使用して、ドロップダウンから選択できるようにすることができます。このプラグインは、選択されたものをリストから削除しますが、選択で強調表示されます。

enter image description here

これは、数値コードの数が増加し、フォームの長さを一定に保つ場合でもスケーリングされます

:ユーザーが多数の値を選択したが、サブバケットを指定せずに非常に多くの値を持つ場合、これが問題になることは知っています情報アーキテクチャの問題。

6
Mervin

長いリストをセクションに分割してみませんか?次に、アコーディオンタイプの機能を使用して、ユーザーが必要に応じて展開/折りたたむことができるようにします。

ここの外観と使用法の例: http://jqueryui.com/accordion/#default

Accordion menu

オプションの追加機能として、選択したアイテムのリスト[リアルタイムで更新]を画面の別の部分または下部に書き込むことができます。これにより、ユーザーはリスト全体(1ページよりも長いと考えられる)を確認することなく、選択したアイテムを追跡できます。

2
Fractional

あなたが持つことができます...

  • 左側の列には、コードのコレクションの(できれば小さい)リストがあり、その横にチェックボックスが付いています
  • 個々のコードの完全なリストを含む右側の列

ユーザーがコレクションのチェックボックスをオンにすると、自動的に個々のコードまでスクロールしてチェックします(オプションで、色が点滅して、選択されていることをユーザーに警告します)。ユーザーがコードのチェックを外すと、コレクションのチェックが自動的に外れ、コレクション全体が選択されていないことがユーザーに通知されます。

1
Luke