<input type="radio" name="radiogroup" id="radiogroup1" class="radiogroup" value="Anime" data-url="https://site.ru/anime" />Anime
<input type="radio" name="radiogroup" id="radiogroup2" class="radiogroup" value="Comedy" data-url="https://site.ru/comedy" />Comedy
<input type="radio" name="radiogroup" id="radiogroup2" class="radiogroup" value="Horror" data-url="https://site.ru/horror" />Horror
<a id="url" href="" target="_blank">Добавить</a>
a {
display: block;
width: 100px;
text-align: center;
text-decoration: none;
margin-top: 20px;
padding: 10px 15px;
backgorund: #fff;
border: 2px solid #484848;
color: #484848;
transition: 0.5s all ease;
}
a:hover {
background: #484848;
color: #fff;
}
$('.radiogroup').change(function(e) {
const $this = $(this), $link = $("#url");
$link.html($this.val());
$link.attr("href", $this.attr("data-url"));
});
This Pen doesn't use any external CSS resources.