コンテンツにスキップ

英文维基 | 中文维基 | 日文维基 | 草榴社区

チェックボックス

出典: フリー百科事典『ウィキペディア(Wikipedia)』
から転送)

チェックボックス: check boxtick box)は、コンピュータのグラフィカルユーザインタフェースの構成要素(ウィジェット)の一種で、いくつかあるオプションから複数の項目を選択するのに使われる。通常、四角の中に空白(偽の場合)かチェックマーク(真の場合)が表示される形式である。チェックボックスの隣にはその説明文が付与される。チェックボックスの状態を反転させるには、チェックボックスまたはその説明文[1]上でマウスをクリックすればよい(あるいはショートカットキーを使う)。

類似要素

[編集]

Microsoft Windowsでは、Push Likeのチェックボックスとして、通常のプッシュボタンの外観を持つチェックボックス(トグルボタン)に設定することも可能である[2]

また、iOSなどのタッチインターフェイスを考慮した環境では、従来のチェックボックスの外観デザインの代わりに、スライド式のスイッチを模した外観を持つチェックコントロールも存在する。

Microsoft Windowsでは、チェックボックスとトグルスイッチやラジオボタンとの使い分けに関するガイドラインが提示されている[3] [4]

3状態チェックボックス

[編集]

アプリケーションソフトウェアによっては、3状態のチェックボックスを使っている場合がある。第三の状態は、チェックボックス内が灰色となる(グレイアウトとも呼ぶ)。この第三の状態は、システムの現在状態ではそのチェックボックスを操作できないことを示す。あるいは、そのチェックボックスが複数の真偽値の集合的状態を表す場合、ダッシュ記号や小さな塗りつぶし矩形を表示し、一部の値が真(チェックされている)で、残りが偽(非チェック)となっていることを示す(中間状態あるいは不確定状態、Indeterminate)。ユーザーがグレイアウト状態もしくは中間状態を選択することはできず、単にユーザーに現在状態を示すのに使われる。

例えば、FTPで転送するファイルを選択するのにチェックボックスを使うことがある。このとき、1度に複数のファイルを選択できるようツリービューもしくはヘッダー付きのリストビュー表示にして、フォルダーまたはディレクトリ単位でまとめて選択できる機能を設けると便利である。あるフォルダー内の一部のファイルがチェックされ、残りが非チェックの場合、そのフォルダーに対応したチェックボックスは中間状態となる。この中間状態のチェックボックスをクリック操作すると、以下のどちらかの状態となり、クリックするたびにもう一方になって、中間状態にはならない。

  • そのフォルダ配下の全ファイル/フォルダーがチェック状態となる。
  • そのフォルダ配下の全ファイル/フォルダーが非チェック状態となる。

3状態チェックボックスの代表的なものとして、Microsoft Windowsにおける、ファイル・フォルダーのプロパティダイアログが挙げられる。Windowsエクスプローラーにおいて、複数のファイルを選択した状態や、フォルダーに対してプロパティを表示させると、複数のファイル属性の集合的状態がチェックボックスで表示・管理されるようになっている。

実装によっては第三の状態もユーザーが選択できる場合がある。この場合、下位の全要素の選択/非選択の状態をシステムが記憶しておく。これはアンドゥ機能[5]の一種である。

HTML5では、input要素のindeterminateプロパティが標準化され、JavaScriptで制御することで3状態チェックボックスを実現できるようになっている[6]

符号位置

[編集]
記号 Unicode JIS X 0213 文字参照 名称
U+2610 - ☐
☐
BALLOT BOX
U+2611 - ☑
☑
BALLOT BOX WITH CHECK
U+2612 - ☒
☒
BALLOT BOX WITH X

脚注

[編集]
  1. ^ HTMLの場合は、説明文上でのクリックを有効にするためにはinput要素とlabel要素を明示的に関連付ける必要がある。
  2. ^ Button Types (Windows)
  3. ^ トグル スイッチ コントロールのガイドライン - Windows app development
  4. ^ Windows ユーザーエクスペリエンス ガイドライン > ガイドライン > コントロール > チェック ボックス
  5. ^ 直前の操作を取り消す機能
  6. ^ 3状態チェックボックス(HTML5だけど古いIEでも動く) - Qiita

関連項目

[編集]