I'm using Bootstrap 3 and I have a radio button like this:

<input type="radio" name="attr_var" >
Add To Attribute

Users can properly click on it for checking it, but it does not unchecked when it's re-clicked.

Basically when it's checked, users can be uncheck it when they re-click on it but this does not workout.

So how to fix this?

CodePudding user response：

Radio buttons are distinct from checkboxes. The user can change options between a set of radio buttons, but it cannot be deselected.

You can refer to this answer for a better explanation as to Why is it impossible to deselect HTML "radio" inputs?

PS. This applies to native HTML radio buttons. You can still use a checkbox for this purpose, or create your own buttons with CSS and Javascript that behave the same way.

CodePudding user response：

If you want to use just single option to be check or uncheck, use Checkbox instead of Radio button.

For example,

<input type="checkbox" name="sampleName" value="sampleValue"> Label

CodePudding user response：

Radio buttons can't be unchecked, I think you just need a checkbox which you can check or uncheck.

Please find the reference here:https://getbootstrap.com/docs/5.0/forms/checks-radios/

<input type="checkbox" name="attr_var" >
Add To Attribute

CodePudding user response：

<div >
  <input  type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label  for="flexRadioDefault1">
    Default radio
  </label>
</div>
<div >
  <input  type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
  <label  for="flexRadioDefault2">
    Default checked radio
  </label>
</div>