Скрыл стандартное отображение группы радиокнопок и заменил из стилизованными span. Нужно средствами JS обработать клик по span и изменить состояние input находящееся с ним в родительском div в состояние checked. И добавить span псевдоэлемент before который будет выглядеть как закрашенная точка чтобы визуально отобразить какая радиокнопка выбрана.
<form action="script.php">
<div class="form-group_2">
<input type="radio" id="input_3" name="category" value="one"
class="real-radio" checked="true">
<span class="custom-radio_1"></span>
<label for="input_3" id="prom_1">Плоские буквы</label>
</div>
<div class="form-group_2">
<input type="radio" id="input_4" name="category" value="two"
class="real-radio">
<span class="custom-radio_1"></span>
<label for="input_4" id="prom_2">Плоские с контражурной подсветкой</label>
</div>
<div class="form-group_2">
<input type="radio" id="input_5" name="category" value="three"
class="real-radio">
<span class="custom-radio_1"></span>
<label for="input_5" id="prom_3">Объемные без подсветки</label>
</div>
</form>
Вот js файл
const spans = document.querySelectorAll('.custom-radio_1');
spans.forEach(span=>{
span.addEventListener('click', ()=>{
span.classList.toggle('check');
span.previousElementSibling.setAttribute('checked', 'true');
})})
В общем скрипт получает nodelist из спанов. После перебирает его и вешает на каждый обработчик события клик. При клике вызывается функция которая получает соседний элемент - то есть нужный инпут и меняет его свойство checked. А также добавляет спану класс css который добавит псевдоэлемент который будет выглядеть как точка в центре радиокнопки. Проблема в том, что свойство чекед должно добавляться только последней выбранной кнопке и удалятся у всех остальных как в стандартном браузерном API.То же самое касается и добавляемому классу check который должен добавлять точку внутри только последней выбранной радиокнопки и удалять у всех предыдущих кнопок. Хотелось бы решение на чистом JS без jQuery.