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

Question

[kr]

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

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

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

(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); 
      }
    })();

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

Answer 1

[Константин Громов]

Следовательно не работает по сторонним причинам: либо ошибка в коде до этого отрезка, либо он подключён до появления самих чекбоксов на странице, либо ещё что. Другой способ решения - не использовать чекбоксы не по назначению.

Answer 2

[Глюкъ Виртуален]

На кой хрен там чекбоксы? :)
Используйте onclick на заголовке спойлера и toggle на самом спойлере. Всего одна строка вместо этой каши.

Answer 3

[Nash]

$('input[type="checkbox"]').on('change', function() {
   $('input[type="checkbox"]').not(this).prop('checked', false);
});