클래스 전체추가방법??

<li class="clearfix">

            <p class="mat-list-subtitle">분야</p>

            <ul class="mat-s2-list-selectBox">

              <li class="on">전체</li>

              <li>본식 스냅</li>

              <li>본식서브 스냅</li>

              <li>본식 영상</li>

              <li>데이트 스냅</li>

              <li>데이트 영상</li>

              <li>돌 스냅</li>

              <li>쇼핑몰</li>

              <li>기타</li>

            </ul>

          </li>

          <script>

            $(".mat-s2-list-selectBox li").click(function(){

              if($(this).hasClass("on")){

                $(this).removeClass("on");

              } else{

                $(this).addClass("on");

              }

            })

          </script>