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

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

  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 个答案: