Tabulator のチェックONOFFデザインを持ってくる。（３）

Tabulator のチェックONOFFデザインを持ってくる。（１） - Oboe吹きプログラマの黙示録

Tabulator のチェックONOFFデザインを持ってくる。（２） - Oboe吹きプログラマの黙示録

SVG でも、innerHTML できるようにする Polyfill - Oboe吹きプログラマの黙示録

次に input type="checkbox" への適用です。svgタグで innerHTMLを働かせるようにすることが
前提でこのチェックＢＯＸ適用ができます。

ＨＴＭＬ

<div id="activediv" class="design-check">
     <input id="active" type="checkbox"><label for="active"><svg class="chk-off"></svg><span>使用する</span></label>
</div>

ＣＳＳ

div.design-check{
   background-color: #f0f0f0;
   position: relative;
   height: 40px;
   line-height: 40px;
   padding: 4px;
   vertical-align: middle;
}
.design-check svg{
   width: 14px;
   height: 14px;
   border: 2px solid #c0c0c0;
   border-radius: 4px;
   background-color: #f0f0f0;
}
svg.chk-on path{
   fill: #2dc214;
   clip-rule: evenodd;
   fill-rule: evenodd;
}
svg.chk-off path{
   fill: #ce1515;
}

.design-check svg{
   display: inline-flex;
}
.design-check label{
   background-color: #f0f0f0;
   display: inline-flex;
   height: 18px;
   position: absolute;
   left: 4px;
   top: 12px;
}
.design-check label span{
   position: absolute;
   left: 24px;
   top: -10px;
   white-space: nowrap;
}

JavaScript ：　svg の path d属性はここで書くと長すぎるので
省略形で書いています。
Tabulator のチェックONOFFデザインを持ってくる。（１） - Oboe吹きプログラマの黙示録
に、d属性値全体を載せてます

svg に bind で独自イベント＆ハンドラを定義して checkbox 変更イベントで、ｓｖｇを書き換えます

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/innersvg-polyfill@0.0.2/innersvg.min.js"></script>
<script type="text/javascript">
$(function(){

   var onPathBody  = '<path d="M21.652,3.211---（省略）-------1L21.652,3.211z"></path>';
   var offPathBody = '<path d="M22.245,4.015---（省略）-------0L22.245,4.015z"></path>';

   $('svg').attr('viewBox', '0 0 24 24');
   $('svg.chk-on').html(onPathBody);
   $('svg.chk-off').html(offPathBody);

   $('svg').bind('cssClassChanged', function(){
      if ($(this).hasClass('chk-on')){
         $(this).html(onPathBody);
      }
      if ($(this).hasClass('chk-off')){
         $(this).html(offPathBody);
      }
   });

   $('#active').change(function(){
      if ($(this).prop("checked")){
         $("label[for='" + $(this).prop("id") + "'] svg").removeClass("chk-off").addClass("chk-on").trigger("cssClassChanged");
      }else{
         $("label[for='" + $(this).prop("id") + "'] svg").removeClass("chk-on").addClass("chk-off").trigger("cssClassChanged");
      }
   });

});
</script>

表示は、
チェックＯＦＦで

チェックＯＮ　で