前書き

rails6のradio_buttonタグでradioボタンを作成したところデフォルトのスタイルをクリックしたら文字の色が変わるようにスタイルを変更したいと思いました。色々苦戦したので記事に残します.

環境

Ruby 3.0.6
Rails 6.1.7.6
jquery: 3.7.1

変更前.

変更後.

やったこと

①○を非表示にする.
②クリックした要素を赤く色を付ける。

①○(radio_button)を非表示にする.

radio_buttonの部分のコードだけ載せます。

= f.label        :weekly_goal,weekly_goal.weekly_goal,for: "weekly_goal_#{weekly_goal.id}",class: "change-color"
= f.radio_button :weekly_goal_id,weekly_goal.id, id:"weekly_goal_#{weekly_goal.id}",class: "not-display"

htmlではこのように解釈されています。radio_buttonがinput要素として解釈されています。

なのでjQueryで非表示にしたい要素(input)のクラスでinput要素を取得しhide()メソッドで表示にする。

 // $(".not-display").hide();

②クリックした要素を赤く色を付ける。

⇨全ての文字を黒くする処理をした後にクリックした要素を赤にすることでクリックした要素だけ色を変えれる。

export function changeLabelColor(e){
     　　　　　　　　　　　　　　　　　                        $("label[class='change-color']").css('color',"black");
                                    $(e.target).css("color", "red");