##チェックボックスとラジオボタンを作ろう
今回はラジオボタンはスムーズに出来たのですが、チェックボックスで少し苦戦したのでメモをしたいと思います。
##説明
小説サイトを練習として真似して作成中です。
まず最初に、タイトルやキーワード、小説のジャンルなどを纏めるテーブル
novel_listsテーブルを作りました。
続いて、今回のチェックボックスとラジオボタン部分です。
・ novel_keyword キーワード
・ genre ジャンル
二つのカラムを作りました。
##novel_list.rb
こちらにenumを使って配列を作りたいと思います。
ジャンルの配列
enum genre:{
different_world: 1, #異世界
real_world: 2, #現実世界
high_fantasy: 3, #ハイファンタジー
low_fantasy: 4, #ローファンタジー
}
キーワードの配列
enum novel_keyword:{
status_difference: 1, #身分差
year_difference: 2, #年の差
non_love: 3, #非恋
villain_daughter: 4, #悪役令嬢
###配列が出来た所で、フォームです。novel_listsのnew.html.erbに今回は作成します。
<%= form_with(model: @novel_list, local: true) do |f| %>
form_withの中に今回は作っていきたいと思います。
<%= f.radio_button :genre, :different_world, checked: "checked" %>
<%= f.label :genre, "異世界", class: "different_world" %>
<%= f.radio_button :genre, :real_world %>
<%= f.label :genre, "現実世界", class: "real_world" %>
<%= f.radio_button :genre, :high_fantasy %>
<%= f.label :genre, "ハイファンタジー", class: "high_fantasy" %>
<%= f.radio_button :genre, :low_fantasy %>
<%= f.label :genre, "ローファンタジー", class: "low_fantasy" %>
まずはラジオボタンですね。
第一引数部分にカラム名としてgenre 第2引数部分にプロパティ名
最後にオプションとして、checked:"checked" これを入れる事で最初に異世界のラジオボタンにチェックが入った状態となります。
ちなみにradio_buttonは一つしか選択が出来ません。
続いて・・・チェックボックスです。こちら苦戦して、teratailで質問しました。後半URL置いておきます。
<%= f.check_box :novel_keyword, {}, :status_difference, nil %>
<%= f.label :novel_keyword, "身分差", class: "status_difference" %>
<%= f.check_box :novel_keyword, {}, :year_difference, nil %>
<%= f.label :novel_keyword, "年の差", class: "year_difference" %>
<%= f.check_box :novel_keyword, {}, :non_love, nil %>
<%= f.label :novel_keyword, "非恋", class: "non_love" %>
<%= f.check_box :novel_keyword, {}, :villain_daughter, nil %>
<%= f.label :novel_keyword, "悪役令嬢", class: "villain_daughter" %>
<%= f.check_box :novel_keyword, {}, :status_difference, nil %>
# 第1引数:カラム名
# 第2引数:オプション
# 第3引数:チェックされたときのvalue
# 第4引数:チェックされてないときのvalue
とわかりやすく教えて頂きました。後は、radio_buttonと同じくlabelを付けて出来上がりです。
##今後の試行錯誤・・・
今回このようにチェックボックスや、ラジオボタンを作りましたが。
collectionなどを使って、モデルデータから.allで作成などしてる記事があったので
カラムのデータだけをチェックボックスとして取得。などそういった事が出来るのではないかと思われます。
検索しつつ、自分でも試行錯誤してみようと思います。
現在の状態だと、多くなるほどコードが見にくいです。これが2行で収まればとても良いと思います。
またわかり次第載せたいと思います。
今回質問した際のURLです。
参考にした記事も載せて頂きました。大変わかりやすかったです。
さらに、
との情報も頂いたので検索して見たいと思っています。```
以上今回のメモでした。