2

Здравствуйте! Есть форма:

<div id="browsers">
  <p><b>Браузер:</b><Br>
    <input type="radio" name="browser" value="ie"> Internet Explorer<Br>
    <input type="radio" name="browser" value="opera"> Opera<Br>
    <input type="radio" name="browser" value="firefox"> Firefox<Br>
  </p>

Как с помощью JavaScript (без использования библиотек вроде jQuery) узнать значение value, если пользователь кликнул на радио кнопку?

Т.е. при клике на Internet Explorer в консоли 'ie', при клике на Opera - 'opera'

3 ответа 3

4
var check = document.querySelectorAll('input[type="radio"]');
for (var i=0;i<check.length;i++){
    check[i].addEventListener('click', function(event) {
         alert(this.value)
    });
}
9
  • Спасибо за ответ. Но нужно на JavaScript без использования библиотеки jQuery
    – Pavel
    8 сен 2016 в 19:44
  • @Pavel, переписал на js 8 сен 2016 в 20:05
  • спасибо Вам! Отлично работает!
    – Pavel
    8 сен 2016 в 20:12
  • Как-то не так переписал - код на jQuery делал не то же самое, что этот.
    – Qwertiy
    10 сен 2016 в 8:09
  • 1
    @cheburashkarf, у этого ответа есть 3 версии - вторая содержит вариант с jQuery, а третья - текущая. Так же есть комментарий: "переписал на js" - без него я бы в ревизии и не полез смотреть. Я говорю о том, что на jQuery-код из второй ревизии похож код в моём ответе. А код в этом ответе не эквивалентен jQuery-коду, поскольку вместо использования всплытия вешает несколько обработчиков. А про то, кто из нас и как раньше ответил, я ничего вообще не говорил.
    – Qwertiy
    10 сен 2016 в 21:27
3

document.getElementById("browsers").addEventListener('change', function (e) {
  document.getElementById("selected-browser").textContent = e.target.value;
});
label { cursor: pointer; }
<div id="browsers">
  <h3>Браузер (<output id="selected-browser">?</output>)</h3>
  <label><input type="radio" name="browser" value="ie"> Internet Explorer</label><br>
  <label><input type="radio" name="browser" value="opera"> Opera</label><br>
  <label><input type="radio" name="browser" value="firefox"> Firefox</label>
</div>

1
  • Плюс за единственный нормально работающий сниппет.
    – Nick Volynkin
    12 сен 2016 в 3:51
2

function radioClick(radioItem){
	alert(radioItem.value);
}
<div id="browsers">
  <p>
    <b>Браузер:</b>
    <br>
    <input type="radio" name="browser[]" value="ie" onclick="radioClick(this);"> Internet Explorer<br>
    <input type="radio" name="browser[]" value="opera" onclick="radioClick(this);"> Opera<br>
    <input type="radio" name="browser[]" value="firefox" onclick="radioClick(this);"> Firefox<br>
  </p>
</div>

1
  • спасибо за ответ, но нужно input должны быть без onclick="radioClick(this);". Т.е. нужен аналог jquery: $("#browsers").on('click', 'input[type=radio]', function(){}
    – Pavel
    8 сен 2016 в 19:30

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.