使用单选按钮更改网站 URL答案

【问题标题】：Changing the website URL with radio buttons使用单选按钮更改网站 URL
【发布时间】：2020-05-02 21:24:13
【问题描述】：

这是一个简单的问题，但我遇到了问题。如果选中单选按钮，我想更改网站 url。这是我的引导单选按钮。

<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-dark active">
        <input type="radio" name="ai" id="option1" autocomplete="off" checked> Account Information
    </label>
    <label class="btn btn-dark">
        <input type="radio" name="ps" id="option2" autocomplete="off"> Password And Security
    </label>
    <label class="btn btn-dark">
        <input type="radio" name="c" id="option3" autocomplete="off"> Contact
    </label>
</div>

【问题讨论】：

你的意思是在单选项目点击时重定向用户？
请向我们提供更多信息。您想更改页面还是只更改 URL 或使用 Ajax 加载页面？预期的行为是什么？

标签： javascript html css radio-button

【解决方案1】：

可能是这样

<script>
function change_loc(url){
  document.location.href = url;
}
</script>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-dark active">
        <input type="radio" name="ai" id="option1" autocomplete="off" checked> Account Information
    </label>
    <label class="btn btn-dark">
        <input type="radio" name="ps" id="option2" autocomplete="off" onclick="change_loc('https://www.google.com/')"> Password And Security
    </label>
    <label class="btn btn-dark">
        <input type="radio" name="c" id="option3" autocomplete="off" onclick="change_loc('https://www.amazon.com/')"> Contact
    </label>
</div>

【讨论】：

【解决方案2】：

不确定您想对 URL 做什么以及为什么收音机上的名称不同，那么最好将它们用作复选框

这将修改现有的 URL，您可以使用位置或历史 API 进行更改

$(function() {
  $(".btn-group-toggle input[type=radio]").on("click",function() {
    let url = new URL(location.href);
    url.searchParams.set(this.id,this.name)
    console.log(url); // location = url;  
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-dark active">
        <input type="radio" name="ai" id="option1" autocomplete="off" checked> Account Information
    </label>
    <label class="btn btn-dark">
        <input type="radio" name="ps" id="option2" autocomplete="off"> Password And Security
    </label>
    <label class="btn btn-dark">
        <input type="radio" name="c" id="option3" autocomplete="off"> Contact
    </label>
</div>

【讨论】：