使用单选按钮更改网站 URL

Question

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

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

使用单选按钮更改网站 URL

Changing the website URL with radio buttons

html

javascript

css

radio-button