チェックボックス IN セレクトボックスなUIの実装方法

プログラミング jQuery

ホームページを作っていると、たまにチェックボックスがセレクトボックスの中に入っているようなUIのデザインを見かけます。
しかしHTMLの仕様上、select要素の中でinput要素は使えません。

チェックボックスはinput要素で実装するので、HTMLだけではチェックボックスがセレクトボックスの中に入っているようなUIは実装できません。

私もそのようなUIを実装しようとした際にかなり悩み、jQueryで解決できたので、その実装方法を記録しておきたいと思います。

もっといい実装方法をご存じの方がいらっしゃったら、Twitterなどでご教示頂けると大変助かります！

結論：jQueryのslideToggleを使う

とにかく実装方法だけ知りたい！という方のために、先にソースコードを掲載しておきます。
jQueryのslideToggleを使います。

See the Pen Checkbox in Selctbox by jQuery by kuniyuki (@c501306014) on CodePen.

slideToggleは、対象要素の表示・非表示をスライドアニメーションで切り替えてくれます。
これを利用して目的のUIを実装します。

もし、デフォルトで対象要素を非表示にしておきたい場合は、その要素に対してCSSでdisplay: none;を指定しておきます。
この時、slideToggleで表示する要素のdisplayは、値がblockになります。その値をflexにしたい場合は、jQueryの記述も追加する必要があります。
※本記事のデモも、対象要素をdisplay: flex;にしたいので、jQueryへの追記が必要です。

本記事のデモをデフォルトで対象要素が非表示になるように書き換えたCSSとjQueryを以下に掲載します。

/* チェックボックスの表示切替ボタン */
.checkbox-toggle {
  max-width: 362px;
  padding: 1em;
  text-align: center;
  cursor: pointer;
  background-color: skyblue;
}

/* チェックボックス */
.checkboxes {
  /* displayプロパティをflexからnoneに書き換え */
  display: none; 
  flex-direction: column;
  width: 360px;
  padding: 1em;
  border: 1px solid skyblue;
}
jQuery(function(){
  jQuery('.checkbox-toggle').on('click', function(){
    jQuery('.checkboxes').slideToggle();
    // チェックボックスのスタイルにdisplay: flex;を付与する処理を追加
    jQuery('.checkboxes').css('display', 'flex'); 
  });
});

それぞれ冒頭に載せたcodePenのソースコードへ丸ごと上書きコピペすれば動きますので、是非お試しください。

ソースコードの説明

それでは、HTML・CSS・JSの各コードを説明します。

HTML

form要素の中身を抜粋します。
※head要素内でjQueryの読み込みを忘れずに記述しておいてください。

<form>
  <!--   チェックボックスの表示切替ボタン   -->
  <div class="checkbox-toggle">
    ここをクリックまたはタップで開閉します
  </div>
  <!--   チェックボックス   -->
  <div class="checkboxes">
    選択してください
    <label>
      <input type="checkbox">
      <span>checkbox1</span>
    </label>
    <label>
      <input type="checkbox">
      <span>checkbox2</span>
    </label>
  </div>
</form>

今回jQueryで操作するのは下記２つのdiv要素です。それぞれのクラス名は、
・チェックボックスの表示切替ボタン：checkbox-toggle
・チェックボックスの入れ物：checkboxes
です。

チェックボックスの入れ物の中には、label要素が２つ入っていて、その中でチェックボックス （input要素）を定義しております。実際に表示・非表示が切り替わるのは、チェックボックスの入れ物です。

CSS

今回特筆すべき点はありません。シンプルに色を付けたり、枠線を付けたりしています。

/* チェックボックスの表示切替ボタン */
.checkbox-toggle {
  max-width: 362px;
  padding: 1em;
  text-align: center;
  cursor: pointer;
  background-color: skyblue;
}

/* チェックボックス */
.checkboxes {
  display: flex;
  flex-direction: column;
  width: 360px;
  padding: 1em;
  border: 1px solid skyblue;
}

JavaScript

jQueryの記述内容を説明します。全部でたったの５行（コメント除く）です。
※コード内の”jQuery”と記述している箇所は、”$”でも動きます。ただし、WordPressなどの環境によっては動かない場合があるので、”jQuery”で統一しています。

jQuery(function(){
  // チェックボックスの表示切替ボタンのクリックイベントを検知
  jQuery('.checkbox-toggle').on('click', function(){
    // チェックボックスの表示をslideToggleで切り替える
    jQuery('.checkboxes').slideToggle();
  });
});

上記ソースコードは、それぞれ下記のような意味があります。
・1行目：HTMLの読み込みが終わったら処理を実行
・3行目：チェックボックスの表示切替ボタン（クラス名checkbox-toggle）がクリックされたら処理を実行
・5行目：チェックボックスの入れ物（クラス名checkboxes）の表示・非表示をアニメーションで切替

以上の処理を組み合わせて、チェックボックスがセレクトボックス内に入っているかのような振る舞いを実現しています。

まとめ

jQueryを使ってチェックボックスをセレクトボックス内に入れる方法を説明しました。
slideToggleを使えば簡単に実装できますね。

slideToggleは要素の表示・非表示をスライドアニメーションで切り替えているだけなので、厳密にいえばセレクトボックスではないのですが、これで本題のようなデザインの動きを再現するUIは実装できます。
slideToggleはアコーディオンメニューの実装などにも使えますので、気になる方は是非検索してみてください。

本記事は以上です。
最後まで読んでくださり、ありがとうございました！
今後の活動のために、もし誤情報などございましたらお問い合わせフォームまたはTwitterにてお知らせいただければ幸いです。
また、コーディングに関するご質問なども受け付けておりますので、お気軽にご連絡ください！

expand_less