2015-07-04 2 views
0

Что мне нужно:window.location не работает с кнопками радио

  • Мне нужно перенаправить страницу указанной URL.

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> 

код расслоения плотной

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

Моей проблема:

  • При нажатии на кнопках радио Somtimes это работает иногда нет.
  • клик на кнопке радио не работает.
+0

Не могли бы вы быть более подробными о том, что происходит? – NightShadeQueen

+0

Правильно ли это форматирование? value = "" htttp: //abc.com/a "Потому что это может сломать DOM и заставить вас не нажимать ни на что – MiltoxBeyond

+0

http://jsfiddle.net/cfmlprabhu/y661v4h9/ – cfprabhu

ответ

1

Если я должен предложить более чистый подход, не вызывайте функции, используя атрибут onclick. Используйте пузырьки событий. Захватите пузырьковые события и сделайте все, что вам нужно.

$(document).ready(function($){ 
 
\t $('#radioButtons').on('click', function(e){ 
 
\t \t var value = $(e.target).attr('value'); 
 
\t \t if(value){ 
 
\t \t \t someFunction(value) 
 
\t \t } 
 
\t }); 
 
}); 
 

 

 
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

+0

Пожалуйста, разместите здесь свой код, а не только ссылку. – Barmar

+0

очень хороший ответ работает отлично – afeef

+0

@Barmar: Извините. Обновлен мой ответ с кодом. –

0

Измените событие клика на переключатель, а не на него. Из-за атрибута 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> 

Надеется, что это помогает !!!

+0

http://codepen.io/anon/pen/rVJEGv –

0

Сначала дайте событие 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"; 
    } 
} 
Смежные вопросы