:checked クラス

　:checked クラスは、<input type="radio">、<input type="checkbox"> や <select> の <option> エレメントにおいて選択されたら、設定されたスタイルを反映する擬似クラスです。

:checked 例

input[type="checkbox"]:checked + label {
	background:linear-gradient(transparent 70%, #ff9E9E 0%);
}

動作の確認はExampleを参照してください

ページ内 Index

構文（Syntax）
Example

構文(Syntax)

CSS

HTMLElement:checked {
  style_propaties;
}

DOM ( JavaScript )

　疑似クラスはDOM ( JavaScript )から操作できません。

　該当するものは<input>ではHTMLInputElement.checked、<select>の<option>ではHTMLOptionElement.selectedが選択されているかを取得することです。選択されるとtrue、選択されていないのならfalseが返ります。
　スタイルのみの操作は擬似クラスを利用したほうが簡易です。以下は例です。

in HTML

<input type="checkbox" name="zoo" id="lbl00"><label for="lbl00">うし</label></input>
<input type="checkbox" name="zoo" id="lbl01"><label for="lbl01">とら</label></input>

in JavaScript

window.onload = function(){
	var _elements = document.getElementsByName("zoo");

	for( i=0; i < _elements.length; i++ ){
		_elements[i].addEventListener("click", change_Elements_Style);
	}
}

function change_Elements_Style(){
	var _lbl = document.querySelector('label[for="' + this.id + '"]');
	if(this.checked){
		_lbl.style.background="linear-gradient(transparent 70%, #ff9E9E 0%)";
	}else{
		_lbl.style.background="";
	}
}

Example

　:checkedの例です。