Как показать скрытый div с данными на странице редактирования в формах Django

Я пытаюсь отобразить скрытый div, содержащий данные, на странице редактирования с помощью javascript в Django forms.

Это сценарий

const checkbox = document.getElementById('commute_id');

const box = document.getElementById('box');

checkbox.addEventListener('click', function handleClick() {
  if (checkbox. Checked) {
    box.style.display = 'block';
  } else {
    box.style.display = 'none';
  }
});  

</script>

Код флажка

<div class="ui_kit_checkbox">
                  <div class="df mb20">
                    <span>
                    {{form.commute_check|as_crispy_field }}
                    </span>
                  </div>
                  </div>

 commute_check = forms.BooleanField(required=False, widget=forms.CheckboxInput(attrs={'id':'commute_id'}))

Разделитель, чтобы показывать и скрывать

<div class="commute" ID="box" style="display:none" >
                      <div class="mb20" STYLE=" display:inline-flex !important;" >
                      
              
                        <span style="padding-right:10px;">
                        {{ form.mon|as_crispy_field }} 
                       </span>
                       

                      </div> 
                   </div>

При первом нажатии на флажок и добавлении данных это работает. Но когда на странице редактирования флажок установлен, но div скрыт

Нужна помощь. Пожалуйста, поделитесь, если у кого-нибудь есть идеи получше для этого сценария.

Вернуться на верх