Railsでラジオボタンを実装する方法を現役エンジニアが解説【初心者向け】

Railsでラジオボタンを実装する方法について解説します。

 
そもそもRubyについてよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプRuby講座の内容をもとに紹介しています。

 

 

ラジオボタンとは

ラジオボタンとは、入力フォームでよく見かける以下のような選択形式のボタンのことです。

チェックボックスが複数の項目を選択できるのに対して、ラジオボタンはどれか1つのみを選択するボタンになります。

 

Railsでラジオボタンを実装する方法（radio_buttonの使い方）

Railsでラジオボタンを実装するにはradio_buttonを使用します。

 

<%= form_with(model: user, local: true) do |form| %>
  <%= form.radio_button :gender, :male %>
  <%= form.radio_button :gender, :female %>
<% end %>

 

プロパティ名と値をセットで指定する必要があり、上の例だとUserモデルのgenderプロパティを選択するラジオボタンが生成されます。

 

<input type="radio" value="male" name="user[gender]" id="user_gender_male">
<input type="radio" value="female" name="user[gender]" id="user_gender_female">

 

選択済の状態にしたい場合はcheckedオプションを指定しましょう。

<%= form.radio_button :gender, :male, checked: true %>

 

[PR] 未経験からWebエンジニアを目指す方法とは

実際に書いてみよう

Userモデルのgenderプロパティを選択するラジオボタンを生成してみましょう。

先ほどのコードでラジオボタンそのものは生成されるのですが、以下の画像のように何を選択するボタンなのかが分からない状態になってしまいます。

選択肢が分かるように、適切にラベルを設定してあげましょう。ラベルの設定にはlabelメソッドを使います。

<%= form_with(model: user, local: true) do |form| %>
  <%= form.radio_button :gender, :male %>
  <%= form.label :gender, "男性", {value: :male, style: "display: inline-block;"} %>
  <%= form.radio_button :gender, :female %>
  <%= form.label :gender, "女性", {value: :female, style: "display: inline-block;"} %>
<% end %>

 

対象フォームの指定(:gender)、表示テキストの指定(“男性”, “女性”)、選択肢との紐付け(value)、テキスト位置の指定( “display: inline-block;”) を行うことで、以下の画像のようなラジオボタンを作成することができます。

 

筆者プロフィール

メンター稲員さん フリーランスエンジニア。 大手SEからフリーランスのWeb系エンジニアにジョブチェンジ。 経験言語：Ruby、Rails、Python、C/C++、Java、Perl、HTML/CSS3、JavaScript、CoffeeScript,Node.js。 おうち大好きマンです。

 

 

TechAcademyでは、初心者でもRuby on Railsを使ったプログラミングを習得できるオンラインブートキャンプRuby講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。