チェックボックスでチェックされた項目を表示する方法：jQuery

2025-09-05 JavaScript

TAGjQuery

チェックボックスでチェックされた項目を表示する方法をご紹介します。

例えばセレクトボックスのような形式で、複数選択させたいときにチェックボックスをセレクトボックスのように見せた方が使い勝手が良いとき等に使用します。

DEMO

1 HTML
2 jQueryの記載

HTML

以下のようなHTMLがあるとします。

<div class="selectcheck">
<div class="selectname">選択してください。</div>
<ul>
  <li><label><input type="checkbox" name="お問い合わせ項目[]" value="項目1"><span>項目1</span></label></li>
  <li><label><input type="checkbox" name="お問い合わせ項目[]" value="項目2"><span>項目2</span></label></li>
  <li><label><input type="checkbox" name="お問い合わせ項目[]" value="項目3"><span>項目3</span></label></li>
  <li><label><input type="checkbox" name="お問い合わせ項目[]" value="項目4"><span>項目4</span></label></li>
</ul>
</div>

jQueryの記載

 $(document).ready(function () {
   // チェックボックスが選択された時に
   $('.selectcheck input[type="checkbox"]').on("change", function () {
     var selectedItems = [];

     // 選択されているチェックボックスの値を配列に格納
     $('.selectcheck input[type="checkbox"]:checked').each(function () {
       selectedItems.push($(this).next("span").text()); // <span>のテキストを取得
     });

     // 選択されていない場合は "選択してください" と表示
     if (selectedItems.length > 0) {
       $(".selectcheck .selectname").text(selectedItems.join(", ")); // 選択された項目をカンマ区切りで表示
     } else {
       $(".selectcheck .selectname").text("選択してください。"); // 選択されていない場合
     }
   });
});

で選択したものが「selectname」クラスの位置に,区切りで表示されるようになります。