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