More than 3 years have passed since last update.

Rails Checkboxのクリック箇所を画像と連動させる方法

Last updated at 2021-09-09Posted at 2021-09-09

やりたいこと

チェックボックスの代わりに画像をクリックで反応してほしい
サンプルGIFは"画像をクリック"⇨"チェック状態"→"グレースケールからカラー状態に変化"するようにしました

 このページでも同じようなコード使ってます

実装コード

html.erb

  <body>
    <%= form_with model: @blog do |f| %>
      <%= f.check_box :タイトル %>
      <%= f.label "タイトル" , class:"ラベル" do %>
        <%= image_tag "minecraft.png" , class:"写真"%>
        <span>文字もいけるよ</span>
      <% end %>
    <% end %>
  </body>

css

.写真{
  width: 300px;
  cursor: pointer;
  filter: grayscale(100%);
  transition: 0.5s;
}

input:checked + label .写真 ,
input:checked + label span {
  filter: grayscale(0);
  font-weight: bold;
  color: red;
}

説明

取り急ぎ自分用で書きました
理解し始めたら詳細を書いていきます

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up