Question

I have radio buttons that are checked if you click a div. The problem is that the radio button does not get 'visually checked' again if you change your mind and click back on the original radio button.

The attribute of the radio button 'checked' is added/removed via if/else statements.

$('.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');
    }
});

Please see my codepen for full working example https://codepen.io/erayner/pen/dwqXdx

Answer 1

You really only need to check the nested radio. Since they have the same name, it will uncheck the other radio.

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

Second check of radio button not showing up

1 个答案: