チェックボックスでカウント | コピペでWordPressカスタマイズ（備忘録）

選択肢のチェックボックスにチェックを入れると、チェッす数をカウントしてくれる仕組み
※JavaScriptやjQueryを読み込まない設定のテーマ等では動きません。

HTML

<div class="checkbox">
<label><input class="checkbox-input" name="checkbox" type="checkbox"><span class="checkbox-parts">とにかくコスト重視</span></label><br>
<label><input class="checkbox-input" name="checkbox" type="checkbox"><span class="checkbox-parts">検索順位などはあまり気にしない</span></label><br>
<label><input class="checkbox-input" name="checkbox" type="checkbox"><span class="checkbox-parts">デザインはすべておまかせでＯＫ</span></label><br>
</div>
あなたが選択したのは<span class="counter">0</span>個です！
<script>
jQuery(function($) {
    $('input:checkbox').change(function() {
        var count = $('.checkbox input:checkbox:checked').length;
        $('span.counter').text(count);
    }).trigger('change');
});
</script>

CSS

/*チェックボックス*/
.checkbox{
	margin-bottom: 1.5em;
}

.checkbox-input{
  display: none;
}

.checkbox-parts{
  padding-left: 23px;
  position:relative;
}

.checkbox-parts::before{
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #999;
  border-radius: 4px;
}

/*.checkbox-input:checked + .checkbox-parts{
  color: #009a9a;
}*/

.checkbox-input:checked + .checkbox-parts::after{
  content: "";
  display: block;
  position: absolute;
  top: -3px;
  left: 5px;
  width: 7px;
  height: 14px;
  animation: check .1s forwards;
  transform: rotate(40deg);
  border-bottom: 3px solid #009a9a;
  border-right: 3px solid #009a9a;
}

@keyframes check {
  0% {
    width: 0px;
    height: 0px;
    top: 9px;
    left: 5px;
  }
  20% {
    width: 7px;
    height: 0px;
    top: 9px;
    left: 2px;
  }
  50% {
    top: 9px;
    left: 2px;
    width: 7px;
    height: 0px;
  }
  100% {
    width: 7px;
    height: 14px;
  }
}

.counter {
	color: red;
	font-size:1.2em;
	padding-left:3px;
	padding-right:3px;
}