Выбор кнопки radio в input через Tab и Enter

#javascript #css3 #html5

  Задача: при помощи Tab можно выбирать нужный платёж и после выбора нажать Enter,
чтобы этот платёж отметился в кнопке radio.


Проблема 1. При навигации при помощи Tab отмечаются поочередно только 2 первых input,
а потом отметка куда-то слетает и через клик по окну снова возвращается и выделяет
input подчёркиванием.

Проблема 2. При выделении input предыдущие выделения должны пропадать, а они сохраняются.  

Проблема 3. По нажатию на Enter input radio должен выделяться через checked.



var one = document.getElementsByTagName('span');
var counter = 0;


document.addEventListener('keydown', function(event){
  if(event.keyCode === 9) {
      for(i=0; i < one.length; i++) {
        one[counter].classList.add('active');
      };
    counter++;
  }

});


 
.active {
  border-bottom: 1px dotted #000;
}
span {
    padding: 5px;
  display: inline-block;
  width: 150px;
}
  
  Оплата наличными


  
  Банковский перевод


  
  Банковский перевод №2


  
  Банковский перевод №3



    

Ответы

Ответ 1

Ответы на проблемы:

1) Инпуты типа "radio" с одинаковым именем(name) воспринимаются как один элемент,
и это стандарт. При tab будет перемещаться только на выбранный инпут или на первый,
если выбранного нету. Для перемещения надо использовать стрелки.

2) Можно подчеркивание организовать только с помощью css. Это удобнее.

3) Инпут с типом радио выбирается при нажатии на пробел. Это стандарт.

Менять стандартное поведение не рекомендуется.

Пример кода выделения без использования javascript.



input[type="radio"]:checked+span {
  border-bottom: 1px dotted #000;
}

label {
  padding: 5px;
  display: inline-block;
  width: 250px;
  border-bottom: 1px dotted transparent;
}


Оплата наличными






Банковский перевод






Банковский перевод №2







Банковский перевод №3