window.location.href = переменная устанавливается Selected Radio Button Value

Question

У меня есть набор радиокнопок:

<input type="radio" name="product" value="Apple"/> 
<input type="radio" name="product" value="Orange"/> 
<input type="radio" name="product" value="Grape"/> 

и две кнопки ниже, который отвезет пользователю в различных местах

<button type="button" id="ButtonHERE">CLICK TO GO HERE</button> 
<button type="button" id="ButtonTHERE">CLICK TO GO THERE</button> 

Я хочу поместить функцию onclick на ButtonTHERE, чтобы при щелчке она вызывала функцию window.location.href и переходила к "shoppingcart.html?value", где Значение - значение выбранного переключателя.

Могу ли я сделать это ВСЕ внутри onclick кнопки, или я должен создать внешнюю функцию, когда радио-кнопка нажата, она устанавливает переменную, а затем загрузить переменную в "shoppingcart.html?value"?

Answer 1

Да, вы можете сделать это все внутри OnClick кнопки (не JQuery):

<input type="radio" name="product" value="Apple"/> 
 
<input type="radio" name="product" value="Orange"/> 
 
<input type="radio" name="product" value="Grape"/> 
 

 
<button type="button" id="ButtonHERE">CLICK TO GO HERE</button> 
 
<button type="button" id="ButtonTHERE" onclick=" 
 
    var elm=document.querySelector('input[name=\'product\']:checked'); 
 
    if(elm) window.location.href='shoppingcart.html%3F' + elm.value; 
 
">CLICK TO GO THERE</button>

Вы хотите, чтобы checked радио-кнопка: чтобы избежать кодирования цикл (старый путь) или кучу вложенных if (или тройников), это современный и правильный способ сделать это (за кулисами это все еще использует жесткую петлю).
%3F - URL-кодировка для ?
Обратите внимание, что вам также может потребоваться escape/url-encode значения (в зависимости от используемых символов)!
Возможно, не выбрана радиокнопка (возможность в вашем текущем примере), затем querySelector('input[name=\'product\']:checked') вернет null. Таким образом, мы поймаем это с помощью if и перенаправляем только, когда пользователь выбрал радиокнопку (вы можете опустить эту проверку, если у вас есть выбор по умолчанию, который пользователь может изменить только, тем самым гарантируя наличие выбранной кнопки).

Кроме того, вы можете оставить href часть window.location, так как оба будут работать одинаково.

Наконец, обратите внимание, что существует новый способ с тех пор, как пару недель (I в настоящее время не рекомендовал бы его, так как он был таким новым): RadioNodeList.
Если радио-кнопки в форме вы можете получить форму (elm_form в данном примере) и сделать:

elm_form.elements['product'].value 

захватить проверенное значение.

PS: было бы лучше, чтобы подключить функцию с помощью JavaScript (ваш вопрос несколько неопределенна в этом отношении):

document.getElementById('ButtonTHERE').onclick=function(){ 
    var elm=document.querySelector('input[name="product"]:checked'); 
    if(elm) window.location='shoppingcart.html%3F' + elm.value; 
}; 

Answer 2

Просто получить значение радио и добавить его к URL:

document.getElementById('ButtonTHERE').onclick = function() { 
    var val = document.getElementsByName('product')[0].value; 
    window.location = "shoppingcart.html?" + val; 
}; 

Answer 3

Да, вполне возможно. Вы можете написать Javascript в OnClick случае, выполнив следующие действия:

<button type="button" id="ButtonTHERE" onclick="javascript:window.location.href=('shoppingcart.html?'+document.querySelector('input[type=\'radio\'].product:checked').value)"> CLICK TO GO THERE </button> 

Добавляя JavaScript :, вы можете выполнять регулярные JavaScript в случае.

Answer 4

Вы также можете сделать это, как:

<input id="asd" type="radio" name="product" value="Apple"/> 
 
<input id="asd" type="radio" name="product" value="Orange"/> 
 
<input id="asd" type="radio" name="product" value="Grape"/> 
 

 
<button type="button" id="ButtonHERE" 
 
onclick="window.location.href=('shoppingcart.html?'+(document.getElementsByName('product')[0].checked?document.getElementsByName('product')[0].value:document.getElementsByName('product')[1].checked?document.getElementsByName('product')[1].value:document.getElementsByName('product')[2].value))">CLICK TO GO HERE</button> 
 
<button type="button" id="ButtonTHERE" 
 
onclick="alert('shoppingcart.html?'+(document.getElementsByName('product')[0].checked?document.getElementsByName('product')[0].value:document.getElementsByName('product')[1].checked?document.getElementsByName('product')[1].value:document.getElementsByName('product')[2].value))">CLICK TO SEE GENERATED LINK</button>