I want to uncheck a radio button and I have tried almost all below methods but those are not working.

Can someone advise me how to achieve this ?

$('input[type="radio"]').prop('checked', false);
$('input[type="radio"]').removeAttr("checked");

<script src=".1.1/jquery.min.js"></script>
<div class="savercol text-center" id="regfareId00">
  <span class="star icon-round_trip"></span>
  <input type="radio" class="" name="foo0" value="0~P~~P0IPRT~3207~~29~X|6E~2135~ ~~BLR~07/28/2018 01:30~DEL~07/28/2018 04:15~">
  <label class=""><span>₹&nbsp;3,344</span></label>
</div>

I want to uncheck a radio button and I have tried almost all below methods but those are not working.

Can someone advise me how to achieve this ?

$('input[type="radio"]').prop('checked', false);
$('input[type="radio"]').removeAttr("checked");

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="savercol text-center" id="regfareId00">
  <span class="star icon-round_trip"></span>
  <input type="radio" class="" name="foo0" value="0~P~~P0IPRT~3207~~29~X|6E~2135~ ~~BLR~07/28/2018 01:30~DEL~07/28/2018 04:15~">
  <label class=""><span>₹&nbsp;3,344</span></label>
</div>

• javascript
• jquery
• reactjs

• $('input[type="radio"]').prop('checked', false); should work. – Ankit Agarwal Commented Jul 25, 2018 at 8:27
• Where are you calling this code? If it's just in the outer javascript, it will be executed immediately onload. – Liftoff Commented Jul 25, 2018 at 8:29
• You should use checkbox instead – Zakaria Acharki Commented Jul 25, 2018 at 8:32
• Your code is definitely right. But I wondered whether you call it at the right place or not. – Terry Wei Commented Jul 25, 2018 at 8:33
• Hi everyone, this code is written on top of jaavscript. – Ambika Tewari Commented Jul 25, 2018 at 9:19

2 Answers 2

You don't need jQuery for this. If you only have one option you should be using a checkbox, if radio buttons then you can use something like below:

Set a state

this.state = {
   value: ''
};

Change handler

handleChange(e) {
   value: e.target.value
}

In render, where options is an array of your values.

{options.map((option, i) => (
   <div>
      <input
         type="radio"
         name={name}
         value={option.value}
         checked={this.state.value === option.value}
         onChange={this.handleChange}}
      />
   </div>
))}

In jQuery you should know the difference between attribute and property. (Link)

Here's an example to show how they works.(Only first time set attribute works)

Hope this helps :)

$('#a').click(function(){  
  $('input[type="radio"]').attr("checked", true);
})
$('#b').click(function(){
  $('input[type="radio"]').removeAttr("checked");
})
$('#c').click(function(){
  $('input[type="radio"]').prop('checked', true);
})
$('#d').click(function(){
  $('input[type="radio"]').prop('checked', false);
})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="savercol text-center" id="regfareId00">
  <span class="star icon-round_trip"></span>
  <input type="radio" class="" name="foo0" value="0~P~~P0IPRT~3207~~29~X|6E~2135~ ~~BLR~07/28/2018 01:30~DEL~07/28/2018 04:15~">
  <label class=""><span>₹&nbsp;3,344</span></label>
</div>
<button id="a">Set by .attr</button>
<button id="b">Remove by .removeAttr</button>
<button id="c">Set by .prop true</button>
<button id="d">Remove by .prop false</button>