1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【Rails】【collection_check_boxes】checked: を使って初期表示をさせる方法

Last updated at Posted at 2023-01-21

はじめに

タグ付け機能を実装するためにcollection_check_boxes を使いました。
その際にユーザーがすでにチェックをつけていた場合にはチェックをつけて表示させたかったのですが、その実現に苦労したため、アウトプットも兼ねて記事にしました。
初学者の為、至らない点もあるとは思いますが温かい目で読んでいただけると嬉しいです!

collection_check_boxes とは?

モデルからチェックボックスを自動生成してくれます。
基本的な使い方についてはこちらの記事が分かりやすかったです。

やりたかったこと

6670258a385aaca763bd962dc7a73f0d.png

投稿(Episode)を見た閲覧者(User)がタグ(Tag)付けをする。
その閲覧者がタグ付けをしたタグのみチェックをつけて表示をする。

実現のために書いたコード

Controller
    @episode = Episode.find(params[:id])
    @tag_relation = current_user.tag_relations.build
    # ↓今回はこれが重要!
    @current_user_select_tags = current_user.tag_relations.where(episode_id: @episode.id).pluck(:tag_id)
View
<%= form_with model: @tag_relation, url: tag_relations_path do |f| %>
  <%= render 'shared/error_messages', object: f.object %>
  <%= f.hidden_field :episode_id, value: @episode.id %>

    <%= f.collection_check_boxes(:tag_id, Tag.all, :id, :name, {checked: @current_user_select_tags, include_hidden: false}) do |tag| %>
      <%= tag.label do %>
        <%= tag.check_box %>
          <%= tag.text %>
        </label>
      <% end %>
    <% end %>

  <%= f.submit "資質を選択する" %>
<% end %>

@current_user_select_tagsは投稿(Episode)の閲覧者(User)に紐づくタグ(Tag)があるかを検索しています。
そして、Viewのf.collection_check_boxes行に書いてある、checked:オプションは配列を渡すことで該当のチェックボックスにあらかじめチェックを入れることができます。
そのためpluck(:tag_id)でユーザーがすでにチェックをつけているタグを配列にしてまとめています。

書いてみるとてもシンプルですが、あれこれ悩んでいたので実装できた時はとても嬉しかったです!!
ここまで読んでいただきありがとうございました!!

参考

【Rails】collection_check_boxesで多対多の関連付けをする方法
Railsで検索機能を作って気がついたこと

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?