Bootstrap 中的可点击单选按钮列表

Question

我如何使这些单选按钮可点击，将我带到特定页面，换句话说，当单击其中一个选项时，它应该将我带到我的主页。 每个选项都应该带我到不同的页面。

    <label class="radio-inline"><input type="radio"  name="optradio"/>Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio"/>Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio"/>Option 3</label>

Answer 1

这是您要完成的任务的完整标记：

 window.onload = function() { var ex1 = document.getElementById('example1'); var ex2 = document.getElementById('example2'); var ex3 = document.getElementById('example3'); ex1.onclick = handler1; ex2.onclick = handler2; ex3.onclick = handler3; } function handler1() { window.location.replace('http://www.example.com'); } function handler2() { window.location.replace('http://www.sample.com'); } function handler3() { window.location.replace('http://www.stackoverflow.com'); }

 <html> <head> <link rel="stylesheet" href="stack.css"/> </head> <body> <html> <head> </head> <body> <input type="radio" name="example1" id="example1" value="Example 1" /> <label for="example1">Example 1</label> <input type="radio" name="example2" id="example2" value="Example 2" /> <label for="example1">Example 2</label> <input type="radio" name="example3" id="example3" value="Example 3" /> <label for="example1">Example 3</label> </body> </html>

Answer 2

您可以将希望它带您到的 URL 存储在标记的data属性中，然后为按钮分配一个事件处理程序，以便在您单击它时将您带到那里。

 var buttons = document.getElementsByClassName('radioLink'); for (var i = 0; i < buttons.length; i++) { buttons[i].addEventListener('change',function() { window.location.href = this.dataset.url; }); }

 <label class="radio-inline"><input class="radioLink" type="radio" name="optradio" data-url="/asdf.html" />Option 1</label> <label class="radio-inline"><input class="radioLink" type="radio" name="optradio" data-url="http://stackoverflow.com" />Option 2</label>

Answer 3

没有按钮的感觉很奇怪。 使用 jQuery 和这样的按钮：

$("#go_to_url").click(function() {
  var url = $('input[name=optradio]:checked', '#myForm').val()
  window.location = url;
});

形式：

<form id="myForm">
<label class="radio-inline"><input type="radio" name="optradio" value="http://google.com" checked>Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio" value="http://google.com">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio" value="http://google.com">Option 3</label>
<button id="go_to_url">take me there</button>
</form>

Bootstrap 中的可点击单选按钮列表

问题描述

3 个解决方案

解决方案1
1 已采纳 2017-01-26 16:45:38

解决方案2
0 2017-01-26 16:53:13

解决方案3
0 2017-01-26 17:00:01

Bootstrap 中的可点击单选按钮列表

问题描述

3 个解决方案

解决方案1 1 已采纳 2017-01-26 16:45:38

解决方案2 0 2017-01-26 16:53:13

解决方案3 0 2017-01-26 17:00:01

解决方案1
1 已采纳 2017-01-26 16:45:38

解决方案2
0 2017-01-26 16:53:13

解决方案3
0 2017-01-26 17:00:01