比較チェックボックス付きリスト

<div class="d11-05-08-wrap">
          <ul class="d11-05-08-list" id="d488List">
            <li><label><input type="checkbox" class="d11-05-08-check">木製デスク &yen;4,200</label></li>
            <li><label><input type="checkbox" class="d11-05-08-check">折りたたみ椅子 &yen;3,600</label></li>
            <li><label><input type="checkbox" class="d11-05-08-check">収納ラック &yen;5,400</label></li>
          </ul>
          <button type="button" class="d11-05-08-btn" id="d488Btn" disabled>比較する(0)</button>
        </div>

.prev.d11-05-08{align-items:flex-start;justify-content:flex-start}
        .d11-05-08-wrap{width:100%}
        .d11-05-08-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
        .d11-05-08-list li{background:#f8f9fb;border-radius:8px;padding:9px 12px}
        .d11-05-08-list label{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#374151;cursor:pointer}
        .d11-05-08-btn{width:100%;padding:10px;border:0;border-radius:8px;background:#d1d5db;color:#6b7280;font-size:13px;font-weight:700;cursor:not-allowed;transition:background .2s,color .2s}
        .d11-05-08-btn.is-active{background:#4f46e5;color:#fff;cursor:pointer}

(function(){
        var root=document.getElementById('item-11-05-08');
        var checks=root.querySelectorAll('.d11-05-08-check');
        var btn=root.querySelector('#d488Btn');
        function update(){
          var n=0;
          checks.forEach(function(c){if(c.checked)n++;});
          btn.textContent='比較する('+n+')';
          btn.disabled=n===0;
          btn.classList.toggle('is-active',n>0);
        }
        checks.forEach(function(c){c.addEventListener('change',update);});
      })();