Пользовательский флажок состояние не обновляется при крахе начальной загрузки

Question

Я какое-то время искал и пробовал несколько разных вещей, но, судя по всему, мне это не удается.

В приведенном ниже коде есть пример пользовательского флажка с divпереключается, чтобы показать / скрыть, когда флажок установлен, а также обычный флажок, где функциональность свертывания и флажок работают должным образом

Не могу понять, почему пользовательский флажок не меняет состояния, когдапроверил - если я удаляю переключатель данных, то настраиваемый флажок работает, но как только ввод данных переключается, происходит сбой.

codepen.io/anon/pen/JzYOpZ

В случае, если неясно - я бы хотел, чтобы состояние флажка переключалось между отмеченным / не отмеченным при нажатии &, чтобы отобразить разборный элемент div.

Answer 1

Если вы активно не избегаете JavaScript, простым решением будет реализация функции для изменения состояния:

HTML Change:

<div class="checkbox" onclick="checkIt()">

Функция JavaScript:

function checkIt()
{
  if (document.getElementById("test").checked == false)
    {
      document.getElementById("test").checked = true;
    }
  else
    {
      document.getElementById("test").checked = false;
    } 
}

Изменить: Не забудьте связать файл сценария, если вы выберете этот ответ:

<script type="text/javascript" src="yourScript.js"></script>

Answer 2

Хорошо, поэтому ответ на этот вопрос был на самом деле невероятно простым

Вместо использования атрибута href для нацеливания на div, который вы хотите свернуть, вам нужно убедиться, что вы используете «data-target»

Я обновил кодовую ручку в вопросе, чтобы отразить это.

Answer 3

Вы должны изменить свойство fill svg, используя разные классы. Вот обновленное перо https://codepen.io/anon/pen/pYjppK

.флажок загружен изначально, я добавил свернутый класс в флажок следующим образом

<label class="cbx collapsed" for="test" data-toggle="collapse" href="#collapseOne">