HTMLにCheckBoxという要素があります。

画面入力フォームで良く使われる要素ですが、全て選択、選択を解除するという実装に悩んだことで、改めてCheckBoxとは何かを調べてみました。調べた結果と思ったこと等を記載します。

基本的な定義

チェックボックス - Wikipedia には以下のように記載されています。

チェックボックス（英: check box、tick box）は、コンピュータのグラフィカルユーザインタフェースの構成要素（ウィジェット）の一種で、いくつかあるオプションから複数の項目を選択するのに使われる。通常、四角の中に空白（偽の場合）かチェックマーク（真の場合）が表示される形式である。

また、- HTML: HyperText Markup Language | MDN には以下のようにされています。

既定でボックスとして描画され、政府の書類で見られるように、有効な時にはチェックが入ります。正確な外見はブラウザーが実行されているオペレーティングシステムの構成によります。一般にこれは四角形ですが、角が丸くなることもあります。チェックボックスによって、フォームで単一の値を選択して (または選択せずに) 送信することができます。

基本的に四角形の入力項目で、選択した場合、Trueになり (Value値がサーバーに送信される)、未選択はの場合はFalse(Value値がサーバーに送信されない)となります。

チェックボックスとラジオボタンの使い分け

以下のページに、チェックボックスとラジオボタンの使い分けについての記載があります。

• チェックボックス 対 ラジオボタン – U-Site
• フォームデザインをレベルアップ！正しいラジオボタンとチェックボックスの使い方 | アドビUX道場 #UXDojo | Adobe Blog
• Checkboxes – GOV.UK Design System

上記ページを見た限り以下のことが言えそうです。

• あるグループから、複数の選択肢をユーザーに選んでもらう場合はチェックボックスを使用する。
• あるグループから、単一の選択肢をユーザーに選んでもらう場合はラジオボタンを使用する。
• ユーザーにyes/no を選択してもらう場合は、チェックボックスを使用する。
• ユーザーにyes/no を選択してもらうケースで、即座に設定を変更する場合は、チェックボックスではなく、トグルスイッチを使用する。

チェックボックスを調べる過程で、トグルスイッチを知りました。

トグルスイッチと、トグルボタンがあり確かにチェックボックスのような状態変化なのですが、画面操作のコンテキストで使い分けた方が、ユーザーにとって使いやすいUIになると思われました。

チェックボックスの全選択、全解除

チェックボックスの全選択、全解除をどのように実装するか個人的には迷いどころで幾つか選択肢があるかと思います。
個人的には、統括チェックボックスを作るか、ボタンで全解除、全選択とするのが良さそうに思ったので、それぞれでサンプル実装を作ってみました。

CheckBox Test

CheckBox には不確定な状況を示す indeterminate という属性があり、 統括チェックボックスではこの属性を使って、一部チェックされている状況をを表現しています。

- HTML: HyperText Markup Language | MDN にあったサンプルに全選択、全解除する処理を追加しました。

不確定な状況で、統括チェックボックスをクリックした際、全選択するか、全解除するべきか悩んだのですが、React Table component - Material-UI での統括チェックボックスの挙動を参考に、全選択としました。結果違和感がなかったので全選択が一般的な気がしました。

チェックボックスとブラウザバック

ブラウザバックした際、チェックボックスの値を保持するか否かの挙動がブラウザごとに異なります。
Chromeの場合は以下のような挙動になりました。

• チェックボックスの値は保持されるが、indeterminate 属性の値は保持されない。

Chromeでは、autocomplete を off にすると値が保持されなくなります。

• Google Chromeとautocomplete - CLOVER🍀

ただ、ブラウザによりこの辺りの挙動も異なるようで、 ie11だと autocomplate を off にしても復旧するようです。

• javascript - Reset checkbox checked state go back from history - Stack Overflow

戻るで戻った際に、情報を復旧したいケース、情報をクリアしたいケースそれぞれあり、状況に応じて考慮することは変わってきそうに思いました。
後は、SPAだと、戻るの挙動がJavaScript任せになるので、あまり考慮してくても良いポイントなのかも知れません。

チェックボックスとアクセシビリティ

考慮事項について

チェックボックスのアクセシビリティ考慮事項について、以下のページが内容がまとまっています。

• Accessibility Matters - Checkbox

記事には以下のような内容が記載されています。

• チェックボックスにはラベルを付与する。
• ラベルタグにCSSで、user-select: none を付与して、期待しないテキスト選択を防ぐ。

• 複数のテキストボックスをグルーピングする場合は、field タグ、legend タグを使う。(そうすることで、VoiceOverでテキストの読み上げられる)

• チェックボックスのデザインをカスタマイズする際の留意点

  • チェックボックス画像の、ポインターイベントを無効化するか検討する。
  • キーボード操作する場合を考慮して、focus style を設定する。
  • ユーザー設定でアニメーションを無効化できるようにする。

実装例

アクセシビリティには配慮した（WAI-ARIA対応した）チェックボックスのサンプルが以下のページからダウンロードできます。

• Checkbox Example (Two State) | WAI-ARIA Authoring Practices 1.1
• Checkbox Example (Mixed-State) | WAI-ARIA Authoring Practices 1.1

チェックボックスとライブラリ

Githubでどんなライブラリがあるのか調べてみました。

Pure JavaScript もしくは、cssのみで実装されているライブラリで目についたものは以下です。

• Twikito/easy-toggle-state: A tiny JavaScript library to easily toggle the state of any HTML element in any contexts, and create UI components in no time.
• hunzaboy/CSS-Checkbox-Library: A huge library of Pure CSS Checkboxes for every taste.
• lokesh-coder/pretty-checkbox: A pure CSS library to beautify checkbox and radio buttons.
• jaywcjlove/magic-input: CSS3 Styles for Checkbox and Radio Button inputs look prettier. with only one element.

参考

• 一括処理のUIをまとめてみた - ゴーリストデザインブログ
• :indeterminate - CSS: カスケーディングスタイルシート | MDN
• React Table component - Material-UI
• クリック・タッチを無効化するCSS「pointer-events: none;」がお手軽で便利 - Yahoo! JAPAN Tech Blog

indeterminate 属性と、user-select: none を知ることができたのが収穫でした。

以上です。