最初に1つのラベル内にオプションを作成し、それらに画像を付けます。今のところ、必要なのは入力タイプと値、および画像srcだけです。
次に、CSSを追加して、画像がすぐに狂ったように見えないようにすることができるので、最初のスタイルを設定します。そこで、不透明度を1に設定します（選択されていないものでもスタイリングを準備できます…）
選択されていない場合は0.3（classname =＆＃x27; radio2＆＃x27;）まで下げましょう！
あなたは考えるかもしれません：そのsim p は、：clickedを使用してクリックされたオプションのcssファイルに不透明度を追加するだけです。そして、あなたは正しいです！それは一種の作品です！唯一の問題は、（入力の）ラジオボタンでのみ機能し、それに付随するアイコンでは機能しないことです。
つまり、実際にはいくつかのロジックが必要です！
2つのことができるようにしたいと考えています。1つはオプションがチェックされているかどうかを検証すること、もう1つはオプションを選択することです。両方を行うには、選択したオプションの状態で情報を保存する必要があります。
オプションがチェックされているかどうかを検証できるようになりました。イベントリスナーがないため、falseになります。それでは、そのリスナーonClickを追加して、ロジックを追加しましょう。
基本的なラジオボタンロジックがここにあるので、本当に重要なことに集中できます。 classNameを変更するには！
内訳：オプションが選択されていない場合、または特定のオプションが選択されている場合に、classNameradio1を返す関数が必要です。そして、他のオプションが選択されたときにclassNameradio2を返すようにします。
今のところ、オプションごとに関数を作成し、後でリファクタリングしましょう。
適切なリファクタリングを行うと、コードは次のようになります。
成功！
