Как сделать, чтобы оставался только один активный чекбокс?

Есть страница, которая содержит кучу спойлеров. Спойлеры сделаны из чекбоксов.

Нужно, чтобы оставался только один выбранный чекбокс (открытый спойлер): пользователь отмечает следующий чекбокс, а предыдущий закрывается. Радиокнопка не подходит, так как мне нужно, чтобы по щелчку на открытый спойлер он мог "схлопываться".

Есть такой код, который работает в песочнице, но почему-то не работает на странице:

(function (){
      var checkHide = document.getElementsByClassName('del');

      for (var i=0; i<checkHide.length; ++i){
        checkHide[i].addEventListener('click', function(){
          if (this.checked){
            for (var j=0; j<checkHide.length; ++j){
              checkHide[j].checked = false;
            }
            this.checked = true;
          }
        }, false); 
      }
    })();

Может, есть какие-нибудь другие способы решить задачу?