バートリーのさいとうです。
今回は
【実例あり】ラジオボタンを選択したら、直前の要素に色をつけたい【JS】
について解説します。
ボタンが選択されたら、周りに色がつくような処理をしたいと思っているあなたへ。
（多分）cssだけでは出来ません。
その理由とは？では、実際にどうすればいいのか？
現役エンジニアの僕が、Javascriptを利用した実装方法を、手順を追って丁寧に解説していきます。（実例つき）
この記事を読めば
- ラジオボタンがおしゃれになる。
- 直前の要素にプロパティを付与できるようになる。
- cssでは出来ない、親子孫関係を取っ払ったセレクタの取得と、css付与のやり方がわかる。
ではいきましょう。
結論から：こうなります。
See the Pen GRWBwwb by バートリーのさいとう@エンジニア (@bartleysaito) on CodePen.
ボタンをクリックすると、その親要素であるdivにbackground-colorとborderが付与されました。
一見cssだけでも出来そうですが、意外にこういうことはできません。
その理由を先に説明した後、このjsの処理について解説します（めっちゃ簡単です）。
理由なんてどうでもいいよ！っていう方は、次のセクションを飛ばしても理解できるようになっているので、心置きなく先を読み進めて下さいね。
［コラム］cssでは、「後の」要素しか指定できない
cssには、隣接セレクタと呼ばれるものがあります。
“+”のことです。
このように使うことができます。
See the Pen abJjPQr by バートリーのさいとう@エンジニア (@bartleysaito) on CodePen.
ラジオボタンをクリックすると、直後のlabelの背景が黄色になりました。
このように、cssでは直後の要素指定のために隣接セレクタが存在します。
一方で、直前の要素を指定する隣接セレクタはありません。
そのため、もし直前の要素にプロパティを付与したい！となったら、jsで要素をidやnameで取得し、その取得した要素にプロパティを付与していくしかないのです。
- cssでは、隣接セレクタのように直後の要素を指定することは可能である。
- 一方で、直前の要素を指定することはできないため、jsの処理が別途必要になる。
これで、cssの隣接セレクタ、cssで出来ることの範囲が理解できたと思います。
では、本題の、最初に見ていただいたコードの解説に入ります。
本題のコード解説
まずは、実装の方針を示します。
- inputにidを付与する
- そのidをクリックしたらイベントを呼び出す
- 呼び出されたイベントが持つ関数内で、inputの親要素を取得する
- ボタンがチェックされたら親要素にstyleを付与する。
一つずつ解説していきます。
1. inputにidを付与する
jsでinput要素を取得するための準備です。
<input class="btn" id="btn_id" type="radio">idが付与できました。
2. そのidをクリックしたらイベントを呼び出す
ここからjsを利用していきます。
getElementByIdを利用し、input要素を定数btnの中に代入します。
const btn = document.getElementById("btn_id")そして、このbtnがクリックされたら呼び出されるイベントリスナーを作成します。
btn.addEventListener("click",() => {
})これで、ラジオボタンがクリックされると呼び出されるイベントを作成することができました。
3. 呼び出されたイベントが持つ関数内で、inputの親要素を取得する
では、先ほど作成したイベントリスナーで呼び出される関数の中身を記述していきます。
btn.addEventListener("click",() => {
let btnParent = btn.parentNode
})親要素を取得するには、ParentNodeを利用します。
これで、input要素の親要素であるdivを取得しbtnParentに代入することができました。
<div class="btn_box"> ←これ
<p>ボタンです</p>
<input class="btn" id="btn_id" type="radio">
</div>4. ボタンがチェックされたら親要素にstyleを付与する。
最後に、選択されたら背景色と枠線を付与できるようにします。
btn.addEventListener("click",() => {
let btnParent = btn.parentNode
if(btn.checked){
btnParent.style.backgroundColor = "#DBF1F4"
btnParent.style.border = "1px solid #0090A8"
}
})ポイントは2点です。
- btn.checkedで、ボタンがチェックされたらtrueを返すようにします。
- “要素.style.プロパティ = プロパティの値”で、cssを付与します。
これで、最初に見ていただいた形になりました！
See the Pen GRWBwwb by バートリーのさいとう@エンジニア (@bartleysaito) on CodePen.
まとめ
いかがだったでしょうか。
cssで出来そうかと思いきや、意外と出来ない直前の要素指定。
基本をマスターすればいろんな場面で活用できそうです。
このブログは、月に15本を目標に、実務から学んだプログラミングのあれこれを発信しています。
誰かのためになれば、嬉しいです。
最後まで読んでいただき、ありがとうございました。
それでは。
【参考記事】
【利用したツール】
・codePen
