日曜、午後、6時半。のロゴ

ラジオボタン選択時に背景色を変える方法(非選択時には色がつかない)【jQuery】

ラジオボタン選択時に色を変える方法

先日、入力フォームのデザインデータを渡されコーディングに励んでいました。

その時、疑問に思ったのが…

ぼく
選択したラジオボタンだけの背景色を変える…ってどうすればいいん??

 

↓渡されたデータはこんな感じです。

渡されたデータ

 

↓下記の様に記述してみたものの…

 

当然、背景色はつきません。

ラジオボタンの選択はできるが背景色がつかない

 

ぼく
えっ!? これマジでどうすればいいん??

 

ラジオボタンなので、当然「aタグ」では囲っていません。

なので、どういった「擬似クラス(:hover、:activeなど)」を付与すればいいのか見当がつきませんでした。

しばらく考えてはみたものの….時間だけが無情に過ぎていく状況。なので先輩に聞くことに。

 

ぼく
すんません。コレってどうしたらいいんですか?

先輩
んっ…あ〜ちょっと面倒くさいかも…

ぼく
CSSで何とかなります…?

先輩
何とかなるかもしれんけど…jQueryでやった方がええかな。今、手が離せないから開発の人と相談しながらやって。

 

ということで、開発(エンジニア)の力を借りることに。

そしたら、15分位で反映してくれました 笑(マジ凄ぇ…)

ただ、十分に理解しないまま終わるのはスッキリしない…ということで後日やり方を教えてもらうことに。

 

ぼく
あれ、どうやったんすか??

エンジニア
えーと…まず両方のラジオボタンに同じクラス名を付与させて背景色をつける。ただ、そうすると両方の背景色が「青色」になるから、valueの値で条件分岐させて切り分けをした。って感じかな。

ぼく
な、なるほど…

 

↓コードの記述はこんな感じ。

 

簡単に説明すると…


  • ラジオボタンがクリックされた時、「val = $(this).val();」により、ラジオボタンに付与されたvalueの値が取得できます。
  • 両方のラジオボタンに付与されているクラス名「check」を「removeClass」で削除しておきます。
  • 条件分岐と「addClass」を利用し、どちらか片方に「check」のクラス名を付与します。
  • 選択されたボタンにしか「check」が付与されないので、「非」選択時には背景色はつきません。

こんな感じです。

答えから逆算していくと”なるほどー”って感じですけど、自分ひとりではたどり着けなかったですね。

プログラムって難しい… ただ聞ける環境にある。こういった状況に感謝しつつ、精進していきます。

ぼく
ここまで読んでくださった方は同じ職種・そしてぼくと同じ位の技量だと思います。(違ってたらスマン)お互い頑張っていきましょう。

 

 

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください