Нужно добавлять стиль, когда 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 - стили не убираются
Прошу вас разъяснить мне этот момент, и показать, как это можно реализовать грамотно.
