チェックでバウンドするチェックリスト

<div class="d04-14-01-wrap">
          <span class="d04-14-01-label">準備物チェックリスト</span>
          <ul class="d04-14-01-list">
            <li><label><input type="checkbox"><span class="d04-14-01-box"><svg viewBox="0 0 16 16" width="11" height="11" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8.5l3.2 3.2L13 4.5"/></svg></span>本人確認書類</label></li>
            <li><label><input type="checkbox"><span class="d04-14-01-box"><svg viewBox="0 0 16 16" width="11" height="11" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8.5l3.2 3.2L13 4.5"/></svg></span>印鑑</label></li>
            <li><label><input type="checkbox"><span class="d04-14-01-box"><svg viewBox="0 0 16 16" width="11" height="11" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8.5l3.2 3.2L13 4.5"/></svg></span>申込用紙</label></li>
          </ul>
        </div>

.d04-14-01-wrap{width:min(280px,100%)}
        .d04-14-01-label{display:block;margin:0 0 10px;font-size:12px;color:#8a93a3}
        .d04-14-01-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
        .d04-14-01-list label{display:flex;align-items:center;gap:10px;font-size:13px;color:#333;cursor:pointer}
        .d04-14-01-list input{position:absolute;opacity:0;width:0;height:0}
        .d04-14-01-box{
          flex:0 0 auto;width:20px;height:20px;border-radius:6px;border:2px solid #d5d9e0;
          display:flex;align-items:center;justify-content:center;background:#fff;
          transition:background .2s,border-color .2s,transform .35s cubic-bezier(.34,1.6,.64,1);
        }
        .d04-14-01-box svg{opacity:0;transform:scale(.4);transition:opacity .2s,transform .2s}
        .d04-14-01-list input:checked + .d04-14-01-box{background:#4a6cf7;border-color:#4a6cf7;transform:scale(1.18)}
        .d04-14-01-list input:checked + .d04-14-01-box svg{opacity:1;transform:scale(1)}
        .d04-14-01-list li.is-settle .d04-14-01-box{transform:scale(1)}

(function(){
        var wrap=document.querySelector('.d04-14-01-wrap');
        if(!wrap)return;
        wrap.querySelectorAll('.d04-14-01-list input').forEach(function(input){
          input.addEventListener('change',function(){
            var li=input.closest('li');
            li.classList.remove('is-settle');
            void li.offsetWidth;
            li.classList.add('is-settle');
          });
        });
      })();