jQueryで[checkbox label :checked] の同期／連動
- 投稿日 : 2010-01-08, 03:33
- 最終更新日時 : 2011-01-14 08:05:55（履歴）
- タグ（jQuery）
- カテゴリ（Javascript）
- 記し人（luvsic）[PDF]
- 閲覧数（4628）
jQueryメモ。
チェックボックスがチェックされているものだけスタイル（文字色や背景色、太字など）を適用させたくて作った。チェックボックスが複数並んでいる場合、チェックされているものが意外と見分けにくい…ので制作。
jQuery(function(){
/* すでにチェックのある項目にはクラスを付与 */
$(':checked').closest('label').addClass('chekd');
$('label').click(function(){
/* いったんすべてのチェックボックスからクラスを削除 */
$('label').removeClass('chekd');
/* チェックのあるチェックボックスを含むラベルにクラスを付与 */
$(':checked').closest('label').addClass('chekd');
});
});
こういうのはユーザビリティ的に必須だと思う。
No comments yet