CSSでチェックボックスがチェックされたら要素表示とかする方法

チェックボックスがチェックされた時、

  • 要素をフェードイン表示したり、
  • 逆に要素を非表示にしたり、
  • 文字の色を変えたりとか・・・

そういう動的な処理ってCSSだけでも十分できます。

そこで自分の記憶の整理も兼ね、
ここでは チェックON・OFF時に要素を表示する方法 を紹介!

jQueryとかスクリプトを書かなくても、複雑な処理ができて便利です。

チェック状態は :checked 疑似クラスを使う

チェックボックスとかラジオボックスとか・・・チェック可能な要素の場合

チェック状態の時だけCSSを適用できる便利な疑似クラスがあります。

それが :checked 疑似クラスというやつ

あんまり目立たないけど、これが意外と便利で使えます。

▼ 以下MDNリファレンスでの説明

CSS の :checked 疑似クラスセレクターは、ラジオボタン(<input type="radio">)、 チェックボックス(<input type="checkbox">)、 オプションボタン(<select> の中の <option>)要素がチェックされていたり on の状態にあったりすることを表します。

引用元 : https://developer.mozilla.org/ja/docs/Web/CSS/:checked

これを使えば、チェック状態のときだけ要素表示とか可能

チェックされたときに要素表示する手順

ではチェックボックスがチェック時に要素表示する手順について

こういう処理って普通スクリプトとか使うイメージですよね。

でも今紹介した :checked  を使えば、CSSだけでチャチャッとできます。

その基本的なやり方手順は次の通り

 

1.まずチェックボックスと表示したい要素作成

2.チェックされたら要素表示するCSS追加

何をしてるかはコード内のコメント参照

ただしラベル表示する時は input   を label  で囲むテクニックが使えません。だから ::after  疑似要素を使って表示制御の邪魔にならない形で追加してます。

▼ after疑似要素についてまとめた記事

そして要素表示を次のタイミングで実行

  • チェックONなら要素を表示する
  • チェックOFFなら要素を隠す

こういう感じで要素表示を切り替えてるだけです。

 

実際にチェックON・OFFしてみた要素がコチラ

▼ チェックが入ってないとき

チェックが入ってないときは要素を非表示

▼ チェックを入れると・・・

チェックが入ったらCSSのchecked疑似クラスを使って表示

ちゃんと要素表示されました。

動的な処理だけど、一切JavaScriptとかjQueryを使ってません。

このくらい簡単な処理なら、スクリプトの出番なし

チェックされたら要素をアニメ表示する応用

とりあえずチェックされたら要素表示する方法はこんな感じ

でも要素がパッと表示されるだけだとイマイチつまらないです。

なのでついでに、アニメ効果を付けて要素表示する方法 も載せときます。

例として作ってみたのが、
次みたいに要素をフェードインさせながら表示させるCSS

 

1.まずさっきと同じように要素作成(変更点なし)

2.そして先ほどのCSSを次のように改造(一部省略)

まず @keyframes  で透明度 0 ~ 1 に変更する fadein  というアニメを作成

そしてチェックボックスが :checked  状態でないなら要素非表示、 :checked  状態が有効になったらアニメを再生するっていう感じです。

 

実際の動作は次のGif動画参照

チェックされたら要素をアニメ表示してる様子。こういう動的な表示もCSSだけでできる

CSSでここまでできるとは驚き(自画自賛)

ここではフェードインするだけですが、応用すれば以下みたいなことも可能です。

  • 回転とか縮尺させながら表示
  • 要素を揺らしながら表示
  • 背景色をグラデーションさせて表示

・・・みたいに工夫次第でいろいろ面白いことができます。

気になる人は transform  プロパティとかで調べてみてください。

ここまでのまとめ

以上、CSSだけでチェック時に要素表示する手順でした。

jQueryとか使う前に、CSSでできないか考えるのも大事ですね。ではでは($・・)/~~~バイバイ

CSS

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


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