Question

我需要什么：

我需要将页面重定向到指定的网址。

html代码：

      <li>
            <input type="radio" checked="" id="radio1" name="radioButton" data-filter=".radio2" class="filter">
            <label for="radio1" class="radio-label" id="shows" value="htttp://abc.com/a" onclick="make_url(1)" >All E</label>
          </li>


          <li>
            <input type="radio" id="radio2" name="radioButton" data-filter=".radio3" class="filter">
            <label for="radio2" class="radio-label" value="htttp://abc.com/s" id="shows" onclick="make_url(2)">Trades</label>
          </li>

js code

function make_url(val) {
    event_type = val;

    if (event_type == 1) {
        window.document.location.href = "/e";

        return false
    } else if (event_type == 2) {
        window.document.location.href = "/tras";
        return false
    }
}

我的问题：

当我点击单选按钮时，它有时会起作用。
点击单选按钮无效。

Answer 1

如果我必须建议更清洁的方法，请不要使用onclick属性调用函数。利用事件冒泡。捕获冒泡的事件并做任何你需要做的事情。

$(document).ready(function($){
	$('#radioButtons').on('click', function(e){
		var value = $(e.target).attr('value');
		if(value){
			someFunction(value)
		}
	});
});


function someFunction(value){
  // Do something with the value. 
  console.log(value);
}

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <ul id="radioButtons" class="list-unstyled">
    <li><input type="radio" value="1"> <label for="">Radio Btn 1</label></li>
    <li><input type="radio" value="2"> <label for="">Radio Btn 2</label></li>
    <li><input type="radio" value="3"> <label for="">Radio Btn 3</label></li>
    <li><input type="radio" value="4"> <label for="">Radio Btn 4</label></li>
    <li><input type="radio" value="5"> <label for="">Radio Btn 5</label></li>
  </ul>
</body>
</html>

以下是一个示例：http://jsbin.com/leyuxolozi/edit?html,js,output

Answer 2

将click事件更改为单选按钮，而不是为标签指定。由于标签的for属性，单选按钮的单击事件也绑定到相应的标签。

试试这段代码：

<ul>
    <li>
        <input type="radio" checked="" id="radio1" name="radioButton" data-filter=".radio2" onclick="make_url(1)" class="filter">
        <label for="radio1" class="radio-label" id="shows" value="htttp://abc.com/a">All E</label>
    </li>


    <li>
        <input type="radio" id="radio2" name="radioButton" data-filter=".radio3" onclick="make_url(2)" class="filter">
        <label for="radio2" class="radio-label" value="htttp://abc.com/s" id="shows" >Trades</label>
    </li>
</ul>

希望这有帮助!!!

Answer 3

首先将onclick事件发送到单选按钮：

 <ul>
   <li>
    <input type="radio" checked="" id="radio1" name="radioButton" data-filter=".radio2" class="filter" onclick="make_url(1)" >
    <label for="radio1" class="radio-label" id="shows" value="htttp://abc.com/a" >All E</label>
   </li>
   <li>
     <input type="radio" id="radio2" name="radioButton" data-filter=".radio3" class="filter" onclick="make_url(2)">
    <label for="radio2" class="radio-label" value="htttp://abc.com/s" id="shows" >Trades</label>
    </li>
  </ul>

然后像这样更改make_url（）函数：

function make_url(val) {
  event_type = val;
  if (event_type == 1) {
     window.location = "/e";
  } 
  else if (event_type == 2) {
    window.location = "/tras";
  }
}

window.location无法使用单选按钮

3 个答案: