Bootstrap中的可點擊單選按鈕列表

如何使這些單選按鈕可點擊，使我轉到特定頁面換句話說，當其中一個選項被點擊時，它應該帶我到我的主頁。每個選項應該帶我到不同的頁面。Bootstrap中的可點擊單選按鈕列表

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

來源

2017-01-26 moe

這裏有你所要完成什麼是完整的標記：

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'); 
 
    } 
 
\t function handler2() { 
 
     window.location.replace('http://www.sample.com'); 
 
    } 
 
\t 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>

來源

2017-01-26 16:45:38

感謝，每個選項應該帶我去一個不同的頁面 – moe

編輯。一探究竟。 –

你可以存儲你希望它帶你到一個網址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>

來源

2017-01-26 16:53:13

沒有按鈕感覺怪怪的。隨着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>

來源

2017-01-26 17:00:01

Bootstrap中的可點擊單選按鈕列表

回答

相關問題