javascript 使用单选按钮更改网站URL

2mbi3lxu  于 2023-03-28  发布在  Java
关注(0)|答案(3)|浏览(196)

这是一个简单的问题,但我有问题。我想改变网站网址,如果一个单选按钮被选中。这里是我的引导单选按钮。

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

aiazj4mn1#

也许像这样

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

mzmfm0qo2#

不知道你想做什么与网址也为什么有不同的名称在电台,那么他们是更好的小康作为复选框
这将修改现有的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>
yfwxisqw

yfwxisqw3#

我不认为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>

相关问题