jQueryで[checkbox label :checked] の同期/連動

jQueryメモ。
チェックボックスがチェックされているものだけスタイル(文字色や背景色、太字など)を適用させたくて作った。チェックボックスが複数並んでいる場合、チェックされているものが意外と見分けにくい…ので制作。

jQueryで checkbox:checked の連動

サンプルページを見る



jQuery(function(){

        /* すでにチェックのある項目にはクラスを付与 */
        $(':checked').closest('label').addClass('chekd');

        $('label').click(function(){

                /* いったんすべてのチェックボックスからクラスを削除 */
                $('label').removeClass('chekd');

                /* チェックのあるチェックボックスを含むラベルにクラスを付与 */
                $(':checked').closest('label').addClass('chekd');

        });

});

こういうのはユーザビリティ的に必須だと思う。

Skooler Records

No comments yet

%3c%69%6e%70%75%74%20%74%79%70%65%3d%22%68%69%64%64%65%6e%22%20%6e%61%6d%65%3d%22%6e%70%5f%70%72%6f%74%65%63%74%62%79%6d%64%35%22%20%76%61%6c%75%65%3d%22%34%61%63%37%66%65%62%34%30%39%39%39%62%38%34%39%34%64%39%62%65%62%37%34%64%64%61%65%35%61%37%37%22%3e %3c%69%6e%70%75%74%20%74%79%70%65%3d%22%68%69%64%64%65%6e%22%20%6e%61%6d%65%3d%22%6e%70%5f%70%72%6f%74%65%63%74%62%79%6d%64%35%5f%68%61%73%68%22%20%76%61%6c%75%65%3d%22%39%37%64%35%65%62%39%66%30%30%37%38%65%63%31%31%30%31%30%37%39%65%63%32%35%65%36%33%32%35%62%63%22%3e
© 2006 – 2020 by Luvsic. Some rights reserved.