javascript - Octothorpe(主题标签)在页面 URL 之后更改输入按钮默认值

Question

这是一个例子，我有一个带有单选按钮的表单，默认选中第一个按钮:

<input type=radio name="input" id="one" checked>
<input type=radio name="input" id="two">
<input type=radio name="input" id="three">
<input type=radio name="input" id="four">

当我输入 index.html#two 时，如何让它默认自动检查两个而不是一个，而当我没有任何 octothorpe 时它会默认为第一个？

提前致谢!

Answer 1

我还没有测试过这个，但如果它不起作用，注释将有望让你找到正确的位置

window.onload = function() {
        if(location.hash){//if the page's URL has an octothore part
            document.getElementById(location.hash.substr(1)).checked=true;
            //gets the checkbox's ID with the hash minus the octothorpe, and then checks it
        } else {
            //if there WASN't an octorthorpe
            document.getElementById('one').checked=true;
        }
    };

如果你想保持状态:

var interval = setInterval(function(){
    window.onload = function() {
        if(location.hash){//if the page's URL has an octothore part
            document.getElementById(location.hash.substr(1)).checked=true;
            //gets the checkbox's ID with the hash minus the octothorpe, and then checks it
        } else {
            //if there WASN't an octorthorpe
            document.getElementById('one').checked=true;
        }
    };
},50);

只要你想让它停止，你可以使用interval.clear();

尽管为了代码卫生，我还是建议:

var checkBoxBasedOnHash = function() {
    if(location.hash){//if the page's URL has an octothore part
        document.getElementById(location.hash.substr(1)).checked=true;
        //gets the checkbox's ID with the hash minus the octothorpe, and then checks it
    } else {
        //if there WASN't an octorthorpe
        document.getElementById('one').checked=true;
    }
};
window.onload = function() {
    checkBoxBasedOnHash();
    var interval = setInterval(checkBoxBasedOnHash,500);
}

因为它减少了重复代码并确保间隔仅在加载复选框后发生。