WEB工房 Swing

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

プログラミング

ホームページを制作する中で、デザインカンプに「セレクトボックスの中にチェックボックスが入っている」UIが含まれていたことはないでしょうか。

しかし、HTMLの仕様上、select要素の中にinput要素を使うことはできません。チェックボックスはinput要素で実装するため、HTMLだけではこのUIを作ることは不可能です。

筆者はこの課題に直面し、jQueryを使って解決しました。その実装方法をここに記録します。

結論：jQueryのslideToggleを使う

実装方法だけ知りたい方のために、まずソースコードのプレビューを掲載します。

jQueryのslideToggleを使います。 このメソッドはスライドアニメーションで要素の表示/非表示を切り替えます。

CodePenでデモを公開しています：Checkbox in Selectbox by jQuery

デフォルトを非表示にした上でdisplay:flexにしたい場合

display: flexでデフォルト非表示にしたい場合は、CSSとjQueryを以下のように修正します：

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

/* チェックボックス */
.checkboxes {
  display: none;
  flex-direction: column;
  width: 360px;
  padding: 1em;
  border: 1px solid skyblue;
}
jQuery(function(){
  jQuery('.checkbox-toggle').on('click', function(){
    jQuery('.checkboxes').slideToggle();
    jQuery('.checkboxes').css('display', 'flex');
  });
});

このコードをそのままCodePenにコピペすれば動作確認できます。

ソースコードの解説

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で操作するのは以下の2つのdiv要素です。

  • checkbox-toggle：チェックボックスの表示/非表示を切り替えるトグルボタン
  • checkboxes：チェックボックスを格納するコンテナ

コンテナの中にはlabel要素が2つ入っており、それぞれにチェックボックス（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

コメントを除けばたった5行です。WordPressとの互換性のため、$ではなくjQueryを使用しています。

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

コードの解説：

  • 1行目： HTMLの読み込みが完了したら処理を実行
  • 3行目： チェックボックス表示切替ボタン（class: checkbox-toggle）がクリックされたら処理を実行
  • 5行目： チェックボックスコンテナ（class: checkboxes）の表示をアニメーション付きで切り替える

まとめ

jQueryのslideToggleメソッドを使えば、セレクトボックスの中にチェックボックスがあるようなUIを簡単に実装できます。厳密にはセレクトボックスではありませんが、デザイン上の動作を再現できます。

slideToggleはアコーディオンメニューなど類似のUIパターンにも活用できます。誤りやコーディングについての質問があれば、お問い合わせフォームまたはTwitterまでご連絡ください。

expand_less