При нажатии на radiobutton html показать значение value

266

25 марта 2018, 19:59

Например такой код. Нажал на какой-нибудь radio и вывелось value через alert.

<form> 
  <p><b>Какое у вас состояние разума?</b></p> 
  <p><input  type="radio" value="nedzen"> Не дзен</p> 
  <p><input  type="radio" value="dzen"> Дзен</p> 
  <p><input  type="radio" value="pdzen"> Полный дзен</p> 
</form>  
 
<form> 
  <p><b>Какое у вас состояние разума?</b></p> 
  <p><input name="dzen" type="radio" value="nedzen"> Не дзен</p> 
  <p><input name="dzen" type="radio" value="dzen"> Дзен</p> 
  <p><input name="dzen" type="radio" value="pdzen"> Полный дзен</p> 
</form>

Answer 1

Если JQuery то:

 $('input[type=radio][name=dzen]').change(function() {
    alert(this.value);
 });

Answer 2

Если ориентрироваться на ваш HTML, то вот так:

const inputArr = document.querySelectorAll('input'); 
inputArr.forEach((input) => { 
        input.addEventListener('click', (e) => { 
        alert(e.target.value); 
    }); 
})

<form> 
    <p><b>Какое у вас состояние разума?</b></p> 
    <p><input  type="radio" value="nedzen"> Не дзен</p> 
    <p><input  type="radio" value="dzen"> Дзен</p> 
    <p><input  type="radio" value="pdzen"> Полный дзен</p> 
</form>  
 
<form> 
    <p><b>Какое у вас состояние разума?</b></p> 
    <p><input name="dzen" type="radio" value="nedzen"> Не дзен</p> 
    <p><input name="dzen" type="radio" value="dzen"> Дзен</p> 
    <p><input name="dzen" type="radio" value="pdzen"> Полный дзен</p> 
</form>

В старом стандарте ES5 код будет таким:

'use strict';
var inputArr = document.querySelectorAll('input');
inputArr.forEach(function (input) {
  input.addEventListener('click', function (e) {
    alert(e.target.value);
  });
});

Если JQuery, то код будет таким:

$('input').each(function() { 
    $(this).on('click', function() { 
        alert($(this).val()) 
    }) 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form> 
    <p><b>Какое у вас состояние разума?</b></p> 
    <p><input  type="radio" value="nedzen"> Не дзен</p> 
    <p><input  type="radio" value="dzen"> Дзен</p> 
    <p><input  type="radio" value="pdzen"> Полный дзен</p> 
</form>  
 
<form> 
    <p><b>Какое у вас состояние разума?</b></p> 
    <p><input name="dzen" type="radio" value="nedzen"> Не дзен</p> 
    <p><input name="dzen" type="radio" value="dzen"> Дзен</p> 
    <p><input name="dzen" type="radio" value="pdzen"> Полный дзен</p> 
</form>

А если писать по хорошему, то у вас должны быть label, внутри которых лежат input. В вашем примере клик происходит только по самому input, но не по тексту рядом. Ниже пример вашего кода через label

const labels = document.querySelectorAll('label'); 
 
labels.forEach((label) => { 
    label.addEventListener('click', (e) => { 
        const input = label.querySelector('input'); 
        const value = input.value; 
             
        input.checked = true; 
        e.preventDefault(); 
        alert(value); 
    }); 
});

<p><b>Какое у вас состояние разума?</b></p> 
<p> 
  <label for="nedzen"> 
     <input id="nedzen" name="dzen" type="radio" value="nedzen" checked>  
     Не дзен 
   </label> 
    </p> 
<p> 
  <label for="dzen"> 
     <input id="dzen" name="dzen" type="radio" value="dzen"> 
     Дзен 
  </label> 
</p> 
<p> 
  <label for="fulldzen"> 
     <input id="fulldzen" name="dzen" type="radio" value="pdzen"> 
     Полный дзен 
  </label> 
</p>

Если нужен старый стандарт ES5, то выглядеть код будет так:

'use strict';
var labels = document.querySelectorAll('label');
labels.forEach(function (label) {
    label.addEventListener('click', function (e) {
        var input = label.querySelector('input');
        var value = input.value;
        input.checked = true;
        e.preventDefault();
        alert(value);
    });
});