Изменить переключатель, выбранный на основе URL-хеша

Question

У меня есть форма, которая имеет 3 различных раздела, у меня также есть несколько ссылок * # 1012 * (#one, #two, #three) на go на страницу формы, но соответствующий раздел формы показан при загрузке страницы по га sh. У меня это работает, когда представление формы обновляется на основе ha sh url, но фактическая форма не обновляется для сбора данных и проверки. То, что мне нужно, - это фактическое изменение переключателя, как если бы оно было нажато. Поэтому, если URL-адрес www......com/#two, соответствующая кнопка-переключатель 2 будет нажата и активна, как если бы она была нажата вручную в форме, когда пользователь отправляется на страницу со ссылкой на страницу / ha sh.

HTML:

 <div class="register_input-container register_input-container--checkbox all role-checkbox">
    <div class="register_checkbox_label-row row">
        <div class="register_checkbox_label-container col">
            <label tabindex="0" for="register_one"
                   class="form_checkbox_label form_checkbox_label--role selected-role" id="one"
                   data-role="one">
                Label One
            </label>
        </div>

        <div class="register_checkbox_label-container col">
            <label tabindex="0" for="register_two"
                   class="form_checkbox_label form_checkbox_label--role" id="two" data-role=two"
                   data-offset="0">
                Label Two
            </label>
        </div>

        <div class="register_checkbox_label-container col">
            <label tabindex="0" for="register_three" class="form_checkbox_label form_checkbox_label--role " id="three"
                   data-role="three">
               Label Three
            </label>
        </div>
    </div>

    <input type="radio" id="register_one" name="role">
    <input type="radio" id="register_two" name="role">
    <input type="radio" id="register_three" name="role">
</div>

jQuery:

//how click event is being handled and toggling form
 if ($('.register_input-container.role-checkbox').length) {
      var roleCheckBoxLabels = document.getElementsByClassName('form_checkbox_label--role');

      for (var i = 0; i < roleCheckBoxLabels.length; i++) {
        (function (x) {
          roleCheckBoxLabels[x].addEventListener('click', function () {
            var $that = $(this),
              input = $that.attr('for');

            $that.closest('.register_checkbox_label-row').find('input').removeAttr('checked');
            $('#' + input + '').prop('checked', true);

            toggleFormView(roleCheckBoxLabels[x]);
          }, false);
        })(i);
      }
    }


//form view toggle
 var toggleFormView = function (that, all, initialRender) {
    // if resetting to default after completion i.e: toggleFormView(null, true)
    if (all) {
      //toggle form view
      $('.register_input-container').css('display', 'none');
      $('.register_input-container.all').css('display', 'block');
    }
    // if toggling form view
    else {
      // get role
      var role = that.dataset.role;

      //toggle form view
      $('.register_input-container').css('display', 'none');
      $('.register_input-container.' + role + '').css('display', 'block');
      $('.register_input-container.all').css('display', 'block');

      // update selected role
      $('.selected-role').removeClass('selected-role');

      that.className += ' selected-role';

      // update validation
      if (!initialRender) {
        updateForm();
      }
    }
  };

// переключатель для URL-адреса ha sh

switch (window.location.hash) {
  case '#two':
    toggleFormView(document.getElementById('two'), null, true);
    break;
  default:
    break;
}

switch (window.location.hash) {
  case '#three':
    toggleFormView(document.getElementById('three'), null, true);
    break;
  default:
    break;
}

Answer 1

Вместо использования toggleFormView имитируйте click() на кнопке:

document.addEventListener("load", function() {
   var hash = window.location.hash;
   if (hash) $(hash).click(); // For instance: $("#two").click()
});