Ruby on Railsでラジオボタンを表示する方法

作成: 2020-01-26

更新: 2020-01-26

タグ: Ruby Rails

Ruby on Railsでフォームにラジオボタンを実装する方法についてのメモです。 booleanの値を選択するラジオボタンとEnumerizeをラジオボタンの作成について記載します。 labelのfor属性を設定する箇所など、たまにわからなくなるので整理しておきます。

環境

rbenv 1.1.2
Ruby 2.7.0
Rails 6.0.2.1

ラジオボタンの実装方法

Railsでのラジオボタンの実装は、フォームヘルパーのradio_buttonメソッドを使います。第一引数に、対称のメソッド名のシンボルを指定し、第二引数に、ラジオボタンの値を設定します。

一方、ラジオボタンに紐づくラベルの表示は、フォームへルパーのlabelメソッドを使います。このラベルのクリックに連動して、ラジオボタンにチェックを入れたい場合は、valueオプションの値に対応するラジオボタンのvalue値を設定します。

<%= form_with(model: model) do |form| %>
  <%= form.radio_button(:<メソッド>, <値>)
  <%= form.label(:<メソッド>, <labelタグに表示する文字列>, value: <紐づけたいラジオボタンのvalue値>)
<% end %>

Boolean(true or false)を登録する場合

実際に、ラジオボタンを作成してみます。Boolean を選択する場合、以下のように実装します。

<%= form_with(model: task, local: true) do |form| %>
  <div class="done">
    <%= form.label :done %>
    <div>
      <%= form.radio_button :done, true %>
      <%= form.label :done, 'True', value: true %>
    </div>
    <div>
      <%= form.radio_button :done, false %>
      <%= form.label :done, 'False', value: false %>
    </div>
  </div>
<% end %>

以下のような、HTMLが生成されます。 id=task_done_trueのラジオボタンに対応するlabelのfor属性を確認すると、task_done_trueが設定されていることで、ラベルをクリックした時に、ラジオボタンも連動しチェックが入ります。これは、labelのvalueオプションにtrueが設定されているためです。for属性の値は、ここでは<モデル名>_<メソッド名>_<valueオプション値>という形で生成されています。

<div class="done">
  <label for="task_done">Done</label>
  <div>
    <input type="radio" value="true" name="task[done]" id="task_done_true">
    <label for="task_done_true">true</label>
  </div>
  <div>
    <input type="radio" value="false" checked="checked" name="task[done]" id="task_done_false">
    <label for="task_done_false">false</label>
  </div>
</div>

Enumerizeを使った場合

Enumerizeを使う場合もほぼ同様です。 enumerizeを使う場合は、モデル名.メソッド.optionsを使うと、以下のようなテキストと値のリストが取得できます。

>> Task.category.options
=> [["プライベート", "private"], ["仕事", "work"]]

i18nを設定しているので、翻訳されたテキストが取得できます。

ja:
  enumerize:
    task:
      category:
        private: プライベート
        work: 仕事

モデルの定義

class Task < ApplicationRecord
  extend Enumerize

  enumerize :category, in: %i[private work]

  validates :category, presence: true
end

optionsで項目名と値が取得できるので、これをループさせてラジオボタンを描画できます。

<%= form_with(model: task, local: true) do |form| %>
  <div class="category">
    <%= form.label :category %>
    <% Task.category.options.each do |text, value| %>
    <div>
      <%= form.radio_button :category, value %>
      <%= form.label :category, text, value: value %>
    </div>
    <% end %>
  </div>

  <%- if task.new_record? %>
    <%= form.submit :create %>
  <%- else %>
    <%= form.submit :update %>
  <% end %>
<% end %>

Booleanを描画するのと同様に、ラジオボタンに対応するfor属性が設定されたラベルが描画されます。

<div class="category">
  <label for="task_category">Category</label>
  <div>
    <input type="radio" value="private" checked="checked" name="task[category]" id="task_category_private">
    <label for="task_category_private">プライベート</label>
  </div>
  <div>
    <input type="radio" value="work" name="task[category]" id="task_category_work">
    <label for="task_category_work">仕事</label>
  </div>
</div>