0

Скрыл стандартное отображение группы радиокнопок и заменил из стилизованными 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.

2 ответа 2

1

Зачем же использовать span, если есть label, которому можно задать for="input_1" (id input-а) и клик по нему будет включать/отключать в том числе и скрытый radio

0

Если прям так сильно хочется оставить span и использовать JS для переключения, то вот:

const spans = document.querySelectorAll('.custom-radio_1');
  spans.forEach(span=>{
  span.addEventListener('click', ()=>{
    spans.forEach(sp => {
      if(sp !== span){
        sp.classList.remove('check');
        sp.previousElementSibling.setAttribute('checked', 'false');
      }  
    })
    span.classList.toggle('check');
    span.previousElementSibling.setAttribute('checked', 'true');
})})
1

Ваш ответ

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

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