複数選択ドロップダウン
ボタンのクリックで開閉し、チェックボックスで複数項目を選べるドロップダウンです。JavaScriptでボタンに is-on クラスを付け外しして開閉を切り替え、 max-height のアニメーションでなめらかに展開します。チェックの変化を監視し、選択件数をボタンのラベルに反映する仕組みです。
解説
ボタンのクリックで開閉し、チェックボックスで複数項目を選べるドロップダウンです。JavaScriptでボタンにis-onクラスを付け外しして開閉を切り替え、max-heightのアニメーションでなめらかに展開します。チェックの変化を監視し、選択件数をボタンのラベルに反映する仕組みです。
使いどころ
記事や商品の絞り込みフィルタ、条件の複数選択、設定画面の項目選びなどに向きます。標準のセレクトボックスでは難しい「複数同時選択」を、見慣れたチェックボックスで実現できます。
- 項目は
labelとinputを増減するだけで追加・削除できる - 外側をクリックすると自動で閉じる配慮が入っている
- 選択件数がボタンに表示され、何件選んだか分かりやすい
実務ではキーボードでの開閉・選択や、選んだ値を実際のフィルタ処理へ渡す部分を足すと完成します。項目が多い場合はmax-height内でスクロールできるので、縦に長くなりすぎません。
使用例・適したシーン
- お問い合わせフォーム
- ニュースレター登録
- 資料請求フォーム
- ログイン・新規登録
よくある質問
選択肢を追加・変更するには
ドロップダウン内の label と中の input（チェックボックス）を増やしたり書き換えたりするだけです。value とラベル文字を設定すれば、選択件数の表示も自動で反映されます。
外側をクリックすると閉じますか
はい。ドキュメント全体のクリックを監視し、ドロップダウンの外側が押されたら自動で閉じる処理が入っています。ボタンを再度押しても開閉を切り替えられます。