У меня есть переключатели, которые проверяются, если вы нажимаете div. Проблема в том, что радиокнопка не становится снова «визуально проверенной», если вы передумаете и снова нажмете на исходную радиокнопку.
Атрибут переключателя 'checked' добавляется / удаляется с помощью операторов if / else.
$('.donate-now .radio--container:nth-child(1)').click(function(){
if ($('#answer2').attr('checked')){
$('#answer2').removeAttr("checked");
$('#answer1').attr('checked', 'checked');
}
else{
$('#answer1').attr('checked', 'checked');
}
});
$('.donate-now .radio--container:nth-child(2)').click(function(){
if ($('#answer1').attr('checked')){
$('#answer1').removeAttr("checked");
$('#answer2').attr('checked', 'checked');
}
else{
$('#answer2').attr('checked', 'checked');
}
});
Пожалуйста, посмотрите мой код для полного рабочего примера https://codepen.io/erayner/pen/dwqXdx

Вам действительно нужно только проверить вложенное радио. Поскольку у них то же имя, это снимет отметку с другого радио.
$(document).ready(function() {
$('.donate-now .radio--container').on('click', function() {
// find the nested radio button, and set it to checked
$(this).find('input[name = "choice"]').prop('checked', true);
});
});body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 0 auto;
}
.header {
text-align: center;
}
h2 {
text-align: center;
}
p {
text-align: center;
}
.radio--container:nth-child(1) {
background: red;
padding: 10px;
}
.radio--container:nth-child(2) {
background: yellow;
padding: 10px;
}
img {
width: 100%;
max-width: 250px;
margin: 0 auto;
}
.donate-now {
display: flex;
justify-content: space-around;
}
.input--container {
width: 100%;
text-align: center;
padding: 20px 0;
}
#submitBtn {
width: 100%;
background: blue;
border: none;
padding: 10px 10px;
color: white;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "container">
<div class = "header">
<h1>WHO GETS YOUR VOTE?</h1>
</div>
<form action = "thankyou.html" method = "post">
<div class = "donate-now">
<div class = "radio--container">
<img src = "https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt = "">
<h2>CAT1</h2>
<p>Vote Cat<br />Vote Cat1</p>
<div class = "input--container"><input type = "radio" id = "answer1" name = "choice" /><label for='answer1' id='label1'>Vote</label></div>
</div>
<div class = "radio--container">
<img src = "https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt = "">
<h2>CAT2</h2>
<p>Vote Cat<br />Vote CAT2</p>
<div class = "input--container"><input type = "radio" id = "answer2" name = "choice" /><label for='answer2' id='label2'>Vote</label></div>
</div>
</div>
<input id = "submitBtn" type = "submit" value = "Vote now">
</form>
</div>
Учитывая, что переключатели имеют одно и то же имя, ваша логика, похоже, выполняет больше работы, чем необходимо. Все, что вам нужно сделать при щелчке по контейнеру, - установить для дочернего переключателя значение true. Другой флажок будет автоматически снят.