Вторая проверка переключателя не отображается

Question

У меня есть переключатели, которые проверяются, если вы нажмете div. Проблема в том, что радио-кнопка не «визуально проверяется» снова, если вы передумаете и нажмете на оригинальную радио-кнопку.

Атрибут переключателя «флажок» добавляется / удаляется с помощью операторов 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

Answer 1

Вам действительно нужно только проверить вложенное радио. Поскольку они имеют одинаковое имя, оно отключит другое радио.

$(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>