札幌Web制作のシンクグラフィカ

checked時にLabelタグのclassを変更する

radioやcheckboxの親ノードにlabelタグが指定されている場合の処理です。

radioやcheckboxの親ノードがlabelタグの場合、radio、checkboxがチェックされている場合チェックされていない場合のclassを可変させることにより、視覚的によりチェック状態・非チェック状態が直感的に理解しやすくなります。

例えば

<input type="checkbox" name="資料請求" value="メールフォーム" /> メールフォーム

このようなチェックボックスの場合は
<label><input type="checkbox" name="資料請求" value="メールフォーム" /> メールフォーム</label>

<label>タグで囲うことにより、チェック時、非チェック時をlabelのクラスにより可変させます。

チェックされている場合のlabelはクラス名mfp_checkedが指定され、チェックされていないlabelはクラス名mfp_not_checkedが指定されます。CSSの設定は

/mfp.statics/css/label.css

で編集することが可能です。