2016/05/01

チェックボックスにチェックしたらクラスを付与する

Warning: Use of undefined constant full - assumed 'full' (this will throw an Error in a future version of PHP) in /home/users/2/foot-plus/web/foot-plus.jp/wp-content/themes/elephant/single.php on line 54

今回は絞り込み用のチェックボックスをカスタムする機会があったので、その際のコード

チェック済みにはクラス付与

(function($) {
    // 読み込んだら開始
    $(function() {
    
        // checkbox, radio にチェックがあったら label に class を付ける
        var checkboxList = $(".checkboxList");
        checkboxList.each(function() {
            var label = $(this).find("label");
            // 最初の処理
            $(this).find(":checked").closest("label").addClass("checked");
            // ラベルクリック
            label.click(function() {
                label.filter(".checked").removeClass("checked");
                label.find(":checked").closest(label).addClass("checked");
            });
        });
    
    });
})(jQuery);

ひと昔前までのチェックボックスだと特にこれは使う必要はない。
チェックマークをボタン風にしたい場合のみ有効だ。
また、クリック毎にクラス付与、クラス消去でも可能だけど、検索結果ページでチェック済みのものにクラスが必要なのでこちらのコードが必要だ。