【HTML5】チェックボックス - 複数選択のためのフォーム部品

チェックボックスは、項目を複数選択するためのフォーム部品です。inputタグで「type="checkbox"」を指定します。

メニュー 焼肉ラーメンフレッシュサラダ 100%オレンジジュース

<b>メニュー</b>
<input type="checkbox" name="food" value="1">焼肉
<input type="checkbox" name="food" value="2">ラーメン
<input type="checkbox" name="food" value="3">フレッシュサラダ
<input type="checkbox" name="food" value="4">100%オレンジジュース

項目を選択することができます。フォーム部品なので、name属性で、名前を付けておくことが一般的です。チェックボックスは、項目のラベルの部分は含まず、選択部分だけが、チェックボックスであることに注意してください。

サーバーに送信したい値はvalue属性に指定します。

チェックボックスは、ラジオボタンと見た目は似ていますが、複数選択できる点が異なります。

チェックボックスは、インラインブロック要素

チェックボックスは、デフォルトで、インラインブロック要素です。インラインブロック要素なので、左側に流れます。

メニュー 焼肉ラーメンフレッシュサラダ 100%オレンジジュース

  <b>メニュー</b>
  <input type="checkbox" name="food" value="1">焼肉
  <input type="checkbox" name="food" value="2">ラーメン
  <input type="checkbox" name="food" value="3">フレッシュサラダ
  <input type="checkbox" name="food" value="4">100%オレンジジュース

チェックボックスをあらかじめチェックする

チェックボックスをあらかじめチェックしておきたいときは「checked="checked"」を指定します。

メニュー 焼肉ラーメンフレッシュサラダ 100%オレンジジュース

<b>メニュー</b>
<input type="checkbox" name="food" value="1" checked="checked">焼肉
<input type="checkbox" name="food" value="2">ラーメン
<input type="checkbox" name="food" value="3">フレッシュサラダ
<input type="checkbox" name="food" value="4">100%オレンジジュース

チェックボックスの各項目のラベルをクリックしたときにフォーカスを当てる

チェックボックスそのものだけでなく、チェックボックスの各項目の見出しのラベルをクリックしたときに、フォーカスが当たるようにするにはlabelタグを使います。inputタグの中のid属性で指定した名前をlabelタグのfor属性に指定します。

メニュー 焼肉ラーメンフレッシュサラダ 100%オレンジジュース

<b>メニュー</b>
<input type="checkbox" name="food" id="food1" value="1"><label for="food1">焼肉</label>
<input type="checkbox" name="food" id="food2" value="2"><label for="food2">ラーメン</label>
<input type="checkbox" name="food" id="food3" value="3"><label for="food3">フレッシュサラダ</label>
<input type="checkbox" name="food" id="food4" value="4"><label for="food4">100%オレンジジュース</label>

それぞれのメニューラベルをクリックしてみてください。対応するチェックボックスが、フォーカスが当たり選択されます。

フォーム送信時に、jQueryでフォームのチェックボックスの値を取得する

送信ボタンを押したタイミングで、チェックボックスの値を取得するjQueryを使ったサンプルです。ajaxでPOSTリクエストを送信するときに、よく使います。取得した内容を、alertで表示しています。

フォームのすべての値を取得する方法

フォームのすべての値を取得する方法です。

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
  $(function () {
    $(document).on('click', '.form-text-field-all .submit_button', function () {
      
      /* フォームのすべての値を取得する方法 */
      var data = $(this).closest('form').serialize();
      
      alert(data);
    });
  });
</script>

<div class="form-text-field-all">
  <form>
    <b>メニュー</b>
    <input type="checkbox" name="food" value="1">焼肉
    <input type="checkbox" name="food" value="2">ラーメン
    <input type="checkbox" name="food" value="3">フレッシュサラダ
    <input type="checkbox" name="food" value="4">100%オレンジジュース
    <button type="button" class="submit_button">送信</button>
  </form>
</div>

on('click')をdocumentから始めているのは、動的なHTMLの書き換えに対応するためです。ドキュメントトップからたどると、HTMLの部分が動的に書き換えられた場合も、正しく動作します。buttonに「type="button"」を指定しておくと、フォームのボタンのサブミットの動作がなくなくすことができます。

指定したチェックボックスの値を取得する方法

指定したチェックボックスの値を取得する方法です。メニューだけを取得しています。チェックでは、複数チェックされている可能性があるので、配列に保存しています。

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
  $(function () {
    $(document).on('click', '.form-text-field-part .submit_button', function () {
      /* メニューを取得 */
      var foods = [];
      $(this).closest('form').find('[name=food]:checked').each(function () {
        var food = $(this).val();
        foods.push(food);
      });
      
      alert(JSON.stringify(foods));
    });
  });
</script>

<div class="form-text-field-part">
  <form>
    <b>メニュー</b>
    <input type="checkbox" name="food" value="1">焼肉
    <input type="checkbox" name="food" value="2">ラーメン
    <input type="checkbox" name="food" value="3">フレッシュサラダ
    <input type="checkbox" name="food" value="4">100%オレンジジュース
    <button type="button" class="submit_button">送信</button>
  </form>
</div>

チェックボックスをオリジナルのデザインにする

チェックボックスは、マウスクリックであれば、使いやすいですが、スマートフォンでは、少し使いづらいという感じはします。

チェックボックスを、オリジナルのデザインにしてみましょう。方法を解説します。

1. チェックボックスにラベルを付ける

2. チェックボックスを非表示にする

3. 兄弟セレクタを使って、チェックを検知

以下は、チェックボックスをオリジナルのデザインにするサンプルです。チェックされた項目にチェックマークがつきます。チェックマークの画像を使っています。チェックボックスに見えないですが、チェックボックスとして機能します。

メニュー

焼肉
ラーメン
フレッシュサラダ
100%オレンジジュース

<style>
  /* チェックボックスを非表示にする */
  .original_checkbox input[type=checkbox] {
    display:none;
  }
  
  /* 選択されたチェックボックスの兄弟であるlabel */
  .original_checkbox input[type=checkbox]:checked + label {
    background:url(/images/checkbox/check.png) no-repeat;
    background-size:15px;
    background-position:15px 14px;
  }
  .original_checkbox {
    display:flex;
    flex-wrap:wrap;
    width:300px;
  }
  .original_checkbox li {
    width:100%;
    border:1px solid #ddd;
    border-bottom:none;
  }
  .original_checkbox li:first-child {
    border-radius:5px 5px 0 0;
  }
  .original_checkbox li:last-child {
    border-radius:0 0 5px 5px;
    border-bottom:1px solid #ddd;
  }
  .original_checkbox label {
    display:block;
    width:100%;
    padding:10px 0px 10px 40px;
    cursor:pointer;
  }
</style>

<b>メニュー</b>
<ul class="original_checkbox">
  <li>
    <input type="checkbox" name="food" id="original_food1" value="1"><label for="original_food1">焼肉</label>
  </li>
  <li>
    <input type="checkbox" name="food" id="original_food2" value="2"><label for="original_food2">ラーメン</label>
  </li>
  <li>
    <input type="checkbox" name="food" id="original_food3" value="3"><label for="original_food3">フレッシュサラダ</label>
  </li>
  <li>
    <input type="checkbox" name="food" id="original_food4" value="4"><label for="original_food4">100%オレンジジュース</label>
  </li>
</ul>

業務に役立つPerl

Perlテキスト処理のエッセンス

PerlでポータブルなLinuxファイル管理入門

ITエンジニアの求人情報など

　ITエンジニアの求人情報・Webサービス・ソフトウェア・スクールなどの情報。

Perl Web開発者のHTML・CSS入門