ywork2020.com

Title

要素がチェックされた時を検知する

目次 (INDEX)

:checkedとは

ここで説明する:checked とは次の語句からなるCSSの疑似クラスです。
checked
読み: チェックトゥ
意味: 検査した、チェックした

目次に戻る

:checked疑似クラスの概要

この疑似クラスはセレクタに該当する要素がチェックされた時、またはonの状態にある時に適用され一時的なプロパティ値の変更を行います。

これは入力要素であるinput要素のチェックボックスやラジオボタン、select要素の中のoption要素に使われる疑似クラスです。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。この疑似クラスの記述は以下のような書き方になります。

セレクター:checked{プロパティ名: 設定値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

サンプルに使うのはinput要素checkbox型です。 この要素に:checked疑似クラスを使ってプロパティ値の一時的な変更を見てみたいと思います。

目次に戻る

参考: 要素がチェックされた時を検知する

ここではサンプルとしてチェックボックスにチェックした時に要素の横幅と縦幅とボックスの影を大きく表示するようにしています。 要素にチェックを入れるには、ユーザーが入力要素をクリックするかプログラムから操作する、もしくは要素の checked 属性 を利用する方法があります。

CheckBox:

input[type="checkbox"]{
	box-shadow: 3px 3px;
	width: 30px;
	height: 30px;
}
input[type="checkbox"]:checked{
	box-shadow: 5px 5px;
	width: 50px;
	height: 50px;
}

目次に戻る