2

Здравствуйте!

Есть такой HTML блок, где input скрыт с помощью стилей, а label представляет из себя кнопку(http://viralpatel.net/blogs/css-radio-button-checkbox-background/):

<input type="radio" name="type" value="20" value="20">
<label for="20">20</label>

Мне нужно по нажатию у input получить значение value="20"

На JavaScript:

document.addEventListener('click', function(e){

console.log(e.target)
});

В консоли выводятся два события по клику мыши, одно принадлежит <label>, другое <input>, Если написать console.log(e.target.value), то у label это будет undefined, у input = 20.

Не думаю, что это правильно. Как лучше получить значение value только для input, не затрагивая label (без jQuery)?

1 ответ 1

3
  1. Вы неправильно используете атрибут for для label. Он должен быть равен id связанного с ним input.
  2. Вы ставите addEventListener не на определенный элемент, а на весь документ.

Кликните на цифру и внизу появится значение.

var input = document.getElementById("name_id");
input.addEventListener('click', function(e){
  console.log(input.value);
});
input { display: none; }
<input id="name_id" type="radio" name="type" value="20">
<label for="name_id">20</label>

Полезные ссылки:
webref.ru label
MDN EventTarget.addEventListener()

1
  • А если таких инпутов много?
    – andreymal
    25 сен 2016 в 8:30

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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