Переключаемый список кнопок радио в 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

отредактирован. Проверьте это. –

Вы можете сохранить 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>

источник

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

ответ

Смежные вопросы