取消选中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> 

Answer 1

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

Answer 2

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>