更改基于url哈希选择的单选按钮

Question

我有一个表单，它有3个不同的部分，我还有一些哈希链接(#1、#2、#3(可以转到表单页面，但在页面加载时会根据哈希显示相应的表单部分。我有它的工作，表单视图是基于哈希url更新的，但实际的表单不是为了收集数据和验证而更新的。我需要做的是实际的单选按钮更改，就好像它被点击了一样。因此，如果url是www……com/#two，那么当用户被发送到带有页面链接/哈希的页面时，相应的单选按钮two将被单击并激活，就像在表单上手动单击一样。

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散列的开关

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