MENU
Close 

   

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

 

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

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

(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);

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

 

  関連記事 - Related Posts -

 

  最新記事 - New Posts -

 

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です