イベント・UI：
<label>のチェック状態を切り替え ①
<label>と、<input type="radio"> または <input type="checkbox"> の組み合わせに対して使用し、<input> のchecked状態を監視して、<label> に class="checked" をリアルタイムで設定・削除する。
引数なし
●必須引数 ●オプション引数(省略可能)
記述例
$checkedRCB1()
注意点
この関数は、<label> に対する class の設定・削除のみを制御しているので、<label class="checked"> の表示状態などは、CSSで設定する。
動作サンプル
HTML :
<body onload="$checkedRCB1()"> //ページ読み込み時に起動しておく
<label class="radio_line"><input type="radio" name="radio1" value="ラジオ-1A">ラジオ-1A</label> //ラジオボタンの例
<label class="checkbox_line"><input type="checkbox" name="checkbox1" value="チェックボックス-A">チェックボックス-A</label> //チェックボックスの例
Sass :
label {
display: inline-block;
padding-left: 29px;
background: no-repeat left center;
background-size: auto 24px;
&.radio_line {
background-image: url(../images/obj_radio_off.svg);
&.checked {
background-image: url(../images/obj_radio_on.svg);
}
}
&.checkbox_line {
background-image: url(../images/obj_checkbox_off.svg);
&.checked {
background-image: url(../images/obj_checkbox_on.svg);
}
}
input {
position: absolute;
left: -9999px;
}
}
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。