Почему при параметре атрибуте checked в checkbox при обновлении сайта форма не меняется?

Question

[Александр Лях]

<div id="insert" class="text-center">
                        <h3>Я здесь впервые <input type="checkbox" name="fluency" value="Yes" id="fluency"></h3> <!-- реализовать по аналогии <?php echo @$data['mail']; ?>-->
                        <br>
                        <button type="submit" value="1" class="btn btn-secondary" name="do_signup"><font>Отправить</font></button>
                     </div>
                  </div>
<!-- ------------------------------------------- form end---------------------------------------------- -->
               </form>
               <script>// made change form of registration when client touch checkbox
                            var state = true
                           function showMessage() {
                              if(state){
                                  state = false;
                                  alert( 'Пароль должен быть больше 6 символом и содержать только следующие символы: A-Z,a-z,0-9' );
                              }
                            }
                           var z=document.getElementById('content');
                           var q=document.getElementById('formtype');
                           $(document).ready(function()
                           {
                             $('#fluency').change(function()
                             {
                               if(this.checked==true)
                               {
                                    z.innerHTML='<div class="row"><div class="col-xs-6 text-center"><h3>Имя</h3><input placeholder="Введите свои данные" name="name"><h3>Фамилия</h3><input placeholder="Введите свои данные" name="surname"><h3>Класс</h3><input placeholder="Введите свои данные" name="class"></div><div class="col-xs-6 text-center"><h3>Почта</h3><input placeholder="Введите свои данные" name="mail"><h3>Пароль</h3><input type="password" name="password" onmouseover="showMessage();"><h3>Повтор пароля</h3><input type="password" name="password-correct"></div></div>';
                                    q.innerHTML = '<h2>Регистрация</h2>';
                               }
                               else {
                                   z.innerHTML='<div class="row"><div class="col-xs-12 text-center"><h3>Имя</h3><input placeholder="Введите свои данные" name="name"><h3>Почта</h3><input placeholder="Введите свои данные" name="mail"><h3>Пароль</h3><input type="password" name="password"></div> </div>';
                                   q.innerHTML = '<h2>Вход</h2>';
                               }
                             });
                           });
                </script>

Самое интересное, когда я снимаю отметку чекбокса и снова отмечаю чекбокс - всё работает. Как исправить это баг?
То есть при обновлении сайта получается следующая картина: чекбокс - отмечен, а форма неизменена (хотя должна бы измениться)

Answer 1

[Надим]

После загрузки страницы принудительно вызовите на вашем чекбоксе обработчик change. Это должно помочь:

<script type="text/javascript">
  $(function() {
    $('#fluency').trigger('change');
  });
</script>

Comments

[Александр Лях]

Спасибо вам огромное!

Answer 2

[Alex]

Браузер может сохранять состояние контроллов формы при перезагрузке страницы.