Perl Web開発者のHTML・CSS入門

【HTML5】ラジオボタン - 項目を選択するフォーム部品

ラジオボタンは、項目を選択するためのフォーム部品です。inputタグで「type="radio"」を指定します。どれかを選択すると他の選択は、解除されます。

価格 1000円未満 1000円～2000円まで 2000円～3000円まで 3000円以上

<b>価格</b>
<input type="radio" name="price" value="1000">1000円未満
<input type="radio" name="price" value="2000">1000円～2000円まで
<input type="radio" name="price" value="3000">2000円～3000円まで
<input type="radio" name="price" value="99999999">3000円以上

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

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

ラジオボタンは、セレクトフィールド(select)と用途は同じですが、項目が少ない場合は、ラジオボタンにして、最初から見えるようにするのも、よいでしょう。

ラジオボタンは、インラインブロック要素

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

  <b>価格</b>
  <input type="radio" name="price" value="1000">1000円未満
  <input type="radio" name="price" value="2000">1000円～2000円まで
  <input type="radio" name="price" value="3000">2000円～3000円まで
  <input type="radio" name="price" value="99999999">3000円以上

ラジオボタンをあらかじめチェックする

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

価格 1000円未満 1000円～2000円まで 2000円～3000円まで 3000円以上

<b>価格</b>
<input type="radio" name="price" value="1000" checked="checked">1000円未満
<input type="radio" name="price" value="2000">1000円～2000円まで
<input type="radio" name="price" value="3000">2000円～3000円まで
<input type="radio" name="price" value="99999999">3000円以上

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

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

価格 1000円未満 1000円～2000円まで 2000円～3000円まで 3000円以上

<b>価格</b>
<input type="radio" name="price" id="price1" value="1000"><label for="price1">1000円未満</label>
<input type="radio" name="price" id="price2" value="2000"><label for="price2">1000円～2000円まで</label>
<input type="radio" name="price" id="price3" value="3000"><label for="price3">2000円～3000円まで</label>
<input type="radio" name="price" id="price4" value="99999999"><label for="price4">3000円以上</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="radio" name="price" value="1000">1000円未満
    <input type="radio" name="price" value="2000">1000円～2000円まで
    <input type="radio" name="price" value="3000">2000円～3000円まで
    <input type="radio" name="price" value="99999999">3000円以上
    <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 price = $(this).closest('form').find('[name=price]:checked').val();
      
      alert(price);
    });
  });
</script>

<div class="form-text-field-part">
  <form>
    <b>価格</b>
    <input type="radio" name="price" value="1000">1000円未満
    <input type="radio" name="price" value="2000">1000円～2000円まで
    <input type="radio" name="price" value="3000">2000円～3000円まで
    <input type="radio" name="price" value="99999999">3000円以上
    <button type="button" class="submit_button">送信</button>
  </form>
</div>

ラジオボタンをオリジナルのデザインにする

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

ラジオボタンを、オリジナルのデザインにしてみましょう。方法を解説します。

1. ラジオボタンにラベルを付ける

2. ラジオボタンを非表示にする

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

以下は、ラジオボタンをオリジナルのデザインにするサンプルです。チェックされた項目が、ピンクになります。ラジオボタンに見えないですが、ラジオボタンとして機能します。

価格

• 1000円未満
• 1000円～2000円まで
• 2000円～3000円まで
• 3000円以上

<style>
  /* ラジオボタンを非表示にする */
  .original_radio input[type=radio] {
    display:none;
  }
  
  /* 選択されたチェックボックスの兄弟であるlabel */
  .original_radio input[type=radio]:checked + label {
    background:pink;
  }
  
  .original_radio {
    display:flex;
    flex-wrap:wrap;
    width:300px;
  }
  .original_radio li {
    width:100%;
    border:1px solid #ddd;
    border-bottom:none;
  }
  .original_radio li:first-child {
    border-radius:5px 5px 0 0;
  }
  .original_radio li:last-child {
    border-radius:0 0 5px 5px;
    border-bottom:1px solid #ddd;
  }
  .original_radio label {
    display:block;
    width:100%;
    padding:10px 20px;
    cursor:pointer;
  }
</style>

<b>価格</b>
<ul class="original_radio">
  <li>
    <input type="radio" name="price" id="original_price1" value="1000"><label for="original_price1">1000円未満</label>
  </li>
  <li>
    <input type="radio" name="price" id="original_price2" value="2000"><label for="original_price2">1000円～2000円まで</label>
  </li>
  <li>
    <input type="radio" name="price" id="original_price3" value="3000"><label for="original_price3">2000円～3000円まで</label>
  </li>
  <li>
    <input type="radio" name="price" id="original_price4" value="99999999"><label for="original_price4">3000円以上</label>
  </li>
</ul>