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

У меня есть переключатели, которые проверяются, если вы нажимаете 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

Учитывая, что переключатели имеют одно и то же имя, ваша логика, похоже, выполняет больше работы, чем необходимо. Все, что вам нужно сделать при щелчке по контейнеру, - установить для дочернего переключателя значение true. Другой флажок будет автоматически снят.

Taplar 09.01.2019 23:12
Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
0
1
9
1

Ответы 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>

Другие вопросы по теме