jquery – Removing the checked property when the radio button is clicked again

Question:

Please tell me how to make it so that by clicking again on the selected radio button, it again becomes unchecked. I understand that I made a mistake somewhere in the code

 $(document).ready(function(){ $('input[type="radio"]').click(function(){ var ir = $(this).prop("checked") if(ir){ $(this).removeAttr("checked") } }) })
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="check1" type="radio" name="group1" value="val1" checked> <label for="check1">Text1</label> <input id="check2" type="radio" name="group2" value="val2"> <label for="check2">Text2</label> <input id="check3" type="radio" name="group3" value="val3"> <label for="check3">Text3</label>

Answer:

$(document).ready(function(){
  $('input[type="radio"]').click(function(){
    $(this).attr('checked', function(index, attr){
      return attr ? null : 'checked';
    });
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="check1" type="radio" name="group1" value="val1">
<label for="check1">Text1</label>
<input id="check2" type="radio" name="group2" value="val2">
<label for="check2">Text2</label>
<input id="check3" type="radio" name="group3" value="val3" cheked>
<label for="check3">Text3</label>
Scroll to Top