Добрый день, самый простой способ - скрыть оригинальные радиокнопки, сверстать кнопки с двумя состоянием: вкл и выкл (через отдельный спан или :before + :after для лейбла). Сам чекбокс выбирается с помощью тега label и аттрибута for.
Собственно, вот пример из бутстрапа:
https://getbootstrap.com/docs/4.3/components/forms...
Обратите внимание на стили
.custom-control-input:checked ~ .custom-control-label::before { ... }
Селектор
.a ~ .b выбирает все элементы с классом .b, следующие за элементами с классом .a (на одном уровне дома). С помощью данной фишки можно исхитриться и делать много интересных вещей без js: слайдеры, выпадающее меню, реализовать любую логику, зависящую от двух состояний.
ps как-то ради интереса реализовывал с помощью селекторов логику из 4х состояний, так что все ограничивается вашей фантазией ;)
Простой
Простой