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

【问题标题】：Clickable Radio Button List in BootstrapBootstrap 中的可点击单选按钮列表
【发布时间】：2017-01-26 16:41:14
【问题描述】：

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

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

【问题讨论】：

标签： javascript html twitter-bootstrap

【解决方案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>

【讨论】：

谢谢，每个选项都应该带我到不同的页面
已编辑。看看吧。

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：