プログラミングマガジン

プログラミングを中心にIT技術をできるだけわかりやすくまとめます。

  • ホーム
  • Ruby on Rails
  • 【Ruby on Rails】「チェックボックス」、「チェックボックスのバリデーション」
 
 
     
  • サーバー言語  
    • Python
    • Ruby
    • PHP
    • SQL
  •  
  • インフラ  
       
    • AWS
    •  
    • 基本
    • Git
  • Web
       
    • Web開発
    • JavaScript
    • Vue.js
    • React
  •  
  • 設計  
       
    • 実装設計
    • DB設計
  • 問い合わせ
  

【Ruby on Rails】「チェックボックス」、「チェックボックスのバリデーション」

12.26

  • miyabisan2
  • コメントを書く

この記事は3分で読めます

単一のチェックボックス

check_box_tag

単一のチェックボックスは下記のように記述します。label_tagと合わせて使用します。

1
2
<%= check_box_tag :パラメータ名 %>
<%= label_tag :パラメータ名, "ラベル内容" %>

check_box_tagの用途

モデルと紐づいていないform(form_tag)の場合に使われます。

checkbo_box

事前にマイグレーションファイルにboolean型でcheckboxを作成します。

1
t.boolean :checkbox

viewファイルに下記のようにcheck_boxメソッドにてチェックボックスを定義します。

1
2
3
4
5
6
7
8
9
10
11
<%= form_with(model: モデル名, local: true) do |form| %>
  <div class="field">
    <%= form.label :ラベル名%>
    <%= form.check_box :パラメータ名, id: :id属性の値%>
  </div>
  <div class="actions">
    <%= form.submit %>
  </div>
 
<% end %>

DBには0(false:チェックなし) or 1(true:チェックあり)が登録されます。

check_boxの用途

モデルと紐づいているform(form_with、form_for)の場合に使われます。

初期値を設定する。

1
2
<%= form.label :ラベル内容 %>
<%= form.check_box :パラメータ名, id: :id属性の値,checked:true %>

「check:true」で可能です。

複数選択のチェックボックス

check_box_tag

マイグレーション側の設定

textを使います。

1
t.text :チェックボックスの格納先のカラム名

view側の設定

配列には、チェックボックスに渡す文字列の配列を定義します。

1
2
3
4
5
6
<% 配列.each.with_index do |配列の要素,i| %>
  <label>
    <%= check_box_tag 'モデル名[チェックボックスの格納先のカラム名][]', 配列の要素,false,id:"id_contents_#{i}"%>
    <%= ラベル名 %>
  </label>
<% end %>

controller側の設定

パラメータに配列として定義します。

1
params.require(:モデル名).permit(:name, :checkbox,チェックボックスの格納先のカラム名:[])

データベースの格納のされ方

text型のカラムに下記のように配列の値が格納されています。

1
["選択値1", "選択値2", "選択値3"]

collection_check_boxes

チェックボックスの選択肢自体をテーブルに保存する場合はcollection_check_boxesというメソッドを使えば実装することが可能です。

ただし、画面から登録データを保存するためのテーブルとは別に、何を選んだか保存するための中間テーブル、選択肢自体を保存するテーブルの二つが必要になるのでテーブルが増えすぎることになります。その点には注意しましょう。

登録先テーブルのモデルの設定

1
2
3
4
class 画面の登録先テーブル < ActiveRecord::Base
  has_many :中間テーブル(複数形)
  has_many :チェックボックスの値保存先テーブル(複数形), :through => :中間テーブル(複数形)
end

チェックボックスの選択肢の保存先モデルの設定

1
2
3
4
class チェックボックスの選択肢保存先テーブル < ActiveRecord::Base
  has_many :中間テーブル(複数形)
  has_many :画面の登録先(複数形), :through => :中間テーブル(複数形)
end

ビューの設定

1
2
3
4
5
6
<div class="field">
  <%= form.label :チェックボックス選択肢モデル %><br />
  <%= collection_check_boxes(:画面の登録先モデル, :(チェックボックス選択肢モデル)_ids,チェックボックス選択肢モデル.all, :チェックボックス選択肢モデルのid(valueの値), :チェックボックス選択肢モデルのラベル名) do |b| %>
    <%= b.label { b.check_box + b.text } %>
  <% end %>
</div>

チェックボックス選択肢モデル)_ids:collection_check_boxesの第二引数

パラメータとして選ばれた選択肢をコントローラに配列として渡すための設定になります。

<%= form.label :チェックボックス選択肢モデル %><br />

別になくても構いませんが、あればチェックボックスの保存先であることをラベル表示しれくれます。

<%= b.label { b.check_box + b.text } %>

b.labelで囲うことによって「<label for="対応するid">各チェックボックス</label>」というHTMLが出力されるのでラベルをクリックしたらチェックボックスをつけるというように実装することが可能です。

コントローラ側の設定

1
2
3
def 画面の登録先モデル_params
  params.require(:画面の登録先モデル).permit(:name,チェックボックス選択肢モデル_ids:[])
end

画面からは「チェックボックス選択肢モデル_ids」という配列が渡るのでStrong Parameterの設定で許可しておきます。

チェックボックスのバリデーション

check_box

選択肢の必須チェック

1
<%= form.check_box :パラメータ名, id: :id名,checked:true %>

モデル側

1
validates :パラメータ名, presence: true

検索すると「validates :admin, inclusion: {in: [true, false]}」にしないとfalseの時にエラーになると出てきますが、Rails6になったからでしょうかこれじゃないとむしろエラーになってしまいました。

collection_check_boxes

選択肢の必須チェック

1
2
3
<%= collection_check_boxes(:画面で登録するモデル名, :選択肢モデル_ids, 選択肢モデル.all, :id, :name) do |b| %>
  <%= b.label { b.check_box + b.text } %>
<% end %>

モデル側

1
validates :選択モデル_ids, presence: true

スポンサーリンク
  • 2020 12.26
  • miyabisan2
  • コメントを書く
  • Ruby on Rails
  • Tweets Twitter
  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事

  1. 2019 12.07

    【Ruby on Rails】「Active Storage」の基本

  2. 2019 12.23

    【Docker】Ruby on Railsのコンテナを作成して起動するまで。

  3. 2019 12.02

    【Ruby on Rails】ログ出力の記述法や様々な設定方法、設計方針

  4. 2019 12.02

    【Ruby on Rails】RailsでのAjaxリクエスト(rails-ujs、SJRなど)

  5. 2019 11.30

    【Ruby on Rails】モデルの状態を自動制御する「コールバック」、「フィルタ(Filter)」について

  6. 2020 12.26

    【Ruby on Rails】「ActionView::Helpers」や「FormBuilder」について

  • コメント ( 0 )
  • トラックバック ( 0 )
  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

返信をキャンセルする。

【Ruby on Rails】「serialize」や…

【AWS】EC2の「インスタンスタイプ」、「購入オプシ…

RETURN TOP

著者プロフィール

エンジニア歴10年で過去に業務系、Webデザイン、インフラ系なども経験あります。現在はWeb系でフロントエンド開発中心です。

詳細なプロフィールはこちら

スポンサーリンク

カテゴリー

  • Android
  • AngularJS
  • API
  • AWS
  • C++
  • CSS
  • cursor
  • C言語
  • DDD
  • DevOps
  • Django
  • Docker
  • Figma
  • Git
  • GitLab
  • GraphQL
  • gRPC
  • Hasura
  • Java
  • JavaScript
  • Kubernetes
  • Laravel
  • linux
  • MySQL
  • Next.js
  • nginx
  • Node.js
  • NoSQL
  • Nuxt.js
  • Oracle
  • PHP
  • Python
  • React
  • Redux
  • Rspec
  • Ruby
  • Ruby on Rails
  • Sass
  • Spring Framework
  • SQL
  • TypeScript
  • Unity
  • Vue.js
  • Webサービス開発
  • Webデザイン
  • Web技術
  • インフラ
  • オブジェクト指向
  • システム開発
  • セキュリティ
  • その他
  • データベース
  • デザインパターン
  • テスト
  • ネットワーク
  • プログラミング全般
  • マイクロサービス
  • マイクロソフト系技術
  • マルチメディア
  • リファクタリング
  • 副業
  • 未分類
  • 業務知識
  • 生成AI
  • 設計
  • 関数型言語
RETURN TOP

Copyright ©  プログラミングマガジン | プライバシーポリシー