イベント・UI：
<label>のチェック状態を切り替え ②
<label for="input_id">と、<input type="radio"> または <input type="checkbox"> の組み合わせに対して使用し、<input> のchecked状態を監視して、<label> に class="checked" をリアルタイムで設定・削除する。
引数なし
●必須引数 ●オプション引数(省略可能)
記述例
$checkedRCB2()
注意点
この関数は、<label> に対する class の設定・削除のみを制御しているので、<label class="checked"> の表示状態などは、CSSで設定する。
<label for="input_id">を設定しないと<input>にクリック操作が伝わらないので注意。
動作サンプル
HTML :
<body onload="$checkedRCB2()"> //ページ読み込み時に起動しておく
<input type="radio" name="radio1" id="radio_1a" value="ラジオ-1A"><label for="radio_1a" class="radio_line">ラジオ-1A</label> //ラジオボタンの例
<input type="checkbox" name="checkbox1" id="checkbox_a" value="チェックボックス-A"><label for="checkbox_a" class="checkbox_line">チェックボックス-A</label> //チェックボックスの例
Sass :
label {
input {
position: absolute;
left: -9999px;
}
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);
}
}
}
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。