BlazorでのWebアプリケーション開発手法１【C#】D17_ラジオボタン

ラジオボタンとは

今回はラジオボタンを扱います。ラジオボタンは、複数の選択肢の中から1つしか選べない入力コントロールです。たとえば会員区分で「一般会員」か「ゴールド会員」のどちらか一方しか選べない、といった場面で使われます。

図1　今回のテーマ「ラジオボタン」

Bootstrapのラジオボタンを調べる

書き方はチェックボックスのときと同様、Bootstrapのドキュメントを参照します。「bootstrap radio」で検索します。

図2　「bootstrap radio」で検索

Bootstrap公式ドキュメントには、チェックボックスとラジオがまとめて掲載されているページがあります。ここではラジオの項目を見ます。ラジオボタンは1個だけ取ってきても意味がないため、2個以上組み合わせたサンプルになっています。

図3　Bootstrap公式ドキュメントの「ラジオ」サンプル

サンプルのHTMLは次のとおりです。

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
  <label class="form-check-label" for="flexRadioDefault2">
    Default checked radio
  </label>
</div>

コード1　Bootstrap公式ドキュメントのラジオボタンのサンプルHTML

サンプルを貼り付けて動作確認する

このサンプルを丸ごとコピーし、MeasureSettingPage.razorの「異常検知」チェックボックスの下に貼り付けます。

図4　MeasureSettingPage.razorに貼り付けたラジオボタンのコード

この状態で実行すると、ラジオボタンがちゃんと表示され、どちらか一方しか選べないことが確認できます。

図5　実行結果　ラジオボタンとして正しく動作している

nameによるグルーピング

このサンプルコードを見ていきます。まず<div>はチェックボックスのときと同じです。その次の<input>のclassも同じで、違うのはtype=”radio”になっている点です。

図6　type=”radio” の指定

そしてもう1つ、チェックボックスにはなかったname属性があります。このnameがラジオボタンのグルーピングを表しています。

図7　name属性がラジオボタンのグループを表す

そのため、1つ目のname を “aaa” にしたら、対になるもう一方のラジオボタンのnameも “aaa” にしておかないといけません。両方とも “aaa” にしておくと、これまでどおり正しく動作します。試しに2つ目のnameだけ “bbb” にしてみます。

<div class="form-check">
  <input class="form-check-input" type="radio" name="aaa" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="bbb" id="flexRadioDefault2" checked>
  <label class="form-check-label" for="flexRadioDefault2">
    Default checked radio
  </label>
</div>

コード2　2つ目のnameだけ”bbb”に変更（意図的な失敗例）

この状態で実行すると、nameが異なるために別グループとして扱われてしまい、2つとも同時にチェックが入ってしまいます。

図8　nameが一致していないため、両方とも選択された状態になってしまう

このため、nameには意味のある、わかりやすい名前を付けておく必要があります。たとえば会員区分であれば、両方のnameを “memberKind” のように同じ名前にしておきます。こうすることで、nameを手掛かりにラジオボタンの一塊が認識されるようになります。

idとforの対応、ラベルの書き換え

次にidの部分を見ます。idはチェックボックスのときと同じで、idとforでラベルとラジオボタンが1対1で対応しています。

図9　idとforでラベルとラジオボタンが対になる

そこで、1つ目はid・forとも “normalMember” にします。

図10　1つ目のid・forを”normalMember”に変更

2つ目はid・forとも “goldMember” にします。あわせて、checked属性がどちらに付いているかも確認しておきます。

図11　2つ目のid・forを”goldMember”に変更

最後に、ラベルの中のテキストを1つ目は「一般会員」、2つ目は「ゴールド会員」に書き換えます。

<div class="form-check">
  <input class="form-check-input" type="radio" name="memberKind" id="normalMember">
  <label class="form-check-label" for="normalMember">
    一般会員
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="memberKind" id="goldMember" checked>
  <label class="form-check-label" for="goldMember">
    ゴールド会員
  </label>
</div>

コード3　完成形　nameを”memberKind”に統一し、id・forとラベル文言を書き換えたコード

図12　完成したコード（エディタ表示）

まとめ

基本的な構造はチェックボックスのときと同じですが、nameを入れることでラジオボタンの一塊を表すという点が異なります。実行すると、「一般会員」と「ゴールド会員」のどちらか一方だけを選べるようになっていることが確認できます。

図13　実行結果　「一般会員」「ゴールド会員」のどちらか一方だけを選択できる