Как добавлять и удалять класс при изменении активного radiobutton?

Question

[Lapin45]

Нужно добавлять стиль, когда radiobutton активен, и удалять, когда неактивен.

<div class="radio_main mt-3 mx-auto">
        <div class="row mx-auto justify-content-center bg-transparent">
            <div class="btn-group-toggle my-1 mx-2" data-toggle="buttons" id="radio_1">
              <label class="btn btn-color">
                <input type="radio" name="youtube" id="youtube" value="YouTube">
                <img src="img/youtube.png" class="mr-1"><i>YouTube</i>
              </label>
            </div>
            <div class="btn-group-toggle my-1 mx-2" data-toggle="buttons"  id="radio_2">
              <label class="btn btn-color">
                <input type="radio" name="wikipedia" id="wikipedia" value="Wikipedia">
                <img src="img/wikipedia.png"><i>Wikipedia</i>
              </label>
            </div>
           <div class="btn-group-toggle my-1 mx-2" data-toggle="buttons"  id="radio_3">
            <label class="btn btn-color">
              <input type="radio" name="twitter" id="twitter" value="Twitter">
              <img src="img/twitter.png"><i>Twitter</i>
            </label>
          </div>
          <div class="btn-group-toggle my-1 mx-2" data-toggle="buttons"  id="radio_4">
            <label class="btn btn-color">
              <input type="radio" name="facebook" id="facebook" value="Facebook">
              <img src="img/facebook.png" class="mr-2"><i>Facebook</i>
            </label>
          </div>
      </div>
    </div>

И есть скрипт:

$('#youtube').click(function(){
	if ($('#youtube').is(':checked')){
		document.getElementById('radio_1').classList.add("radio_active");
	}
	else {
		document.getElementById('radio_1').classList.remove("radio_active");
	}
});

Я считаю, что моё решение - костыль. И к слову, он не работает, потому что при переключении на другой radiobutton - стили не убираются

Прошу вас разъяснить мне этот момент, и показать, как это можно реализовать грамотно.

Comments

[Михаил Мингареев]

тут от корня идти надо) зачем radio здесь? radio используется когда нужно выбрать один из всех вариантов(тогда. кстати. у всех должен быть одинаковый name);
здесь тебе нужны чекбоксы;

все что должно меняться с кликом на инпут(чекбокс) оберни в label;

 вот дальше со стилями надо экспериментировать, но если jQuery, то при клике на чекбокс ищешь родителя ($(this).parent('label') и меняешь класс с помощью toggleClass)

Answer 1

[kocherman]

Добавлять класс при активном radiobutton - это уже сам по себе костыль даже без реализации. Так как из CSS он доступен по ":checked". И еще у вас каждый radio-элемент имеет своё имя - это неправильно, у радио-элементов должно быть одинаковое значение атрибута name="", но разное значение атрибута id="". И Если необходимо отправлять эти данные на сервер, вам необходимо обернуть все это хозяйство в тег <FORM>.

Comments

[Lapin45]

Отправлять данные на сервер необходимости нет, а в остальном спасибо за рекомендацию