Uncheck Radio Button in reactjs

Question

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.com/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>

`$('input[type="radio"]').prop('checked', false);` should work. — Ankit Agarwal, Jul 25 '18 at 08:27
Where are you calling this code? If it's just in the outer javascript, it will be executed immediately onload. — Liftoff, Jul 25 '18 at 08:29
Your code is definitely right. But I wondered whether you call it at the right place or not. — Terry Wei, Jul 25 '18 at 08:33

score 4 · Answer 1 · answered Jul 25 '18 at 08:34

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>
))}

score 1 · Answer 2 · answered Jul 25 '18 at 08:46

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.com/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>

Hi @Terry, how should I do that without onclick function. I need to put this in javascript and that javascript is referenced on page. So when the page is loaded , action mentioned in javascript should be executed. — Ambika Tewari, Jul 25 '18 at 09:19
Put set/unset method in onload. For example, `$(document).ready(function(event){......do set/unset action })` — Terry Wei, Jul 25 '18 at 09:30

Uncheck Radio Button in reactjs

2 Answers2