使用单选按钮更改网站 URL

Answer 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>

Answer 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>

Answer 3

我认为此解决方案不需要 JavaScript。 name="" 也必须相同才能使它们成为同一组。您可以选择添加 value=""。

    <div class="btn-group btn-group-toggle" data-toggle="buttons">
        <input type="radio" name="options" value="ai" id="option1" autocomplete="off" 
    onclick="location.href='www.google.com/ai'" checked> Account Information<br />
        <input type="radio" name="options" value="ps" id="option2" autocomplete="off" 
    onclick="location.href='www.google.com/ps'"> Password And Security<br />
        <input type="radio" name="options" value="c" id="option3" autocomplete="off" 
    onclick="location.href='www.google.com/c'"> Contact<br />
</div>