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