How to make a radio button unchecked by clicking it

Question

Unlike check boxes  it is impossible for the user to deselect radio buttons once they are clicked   Is there any way so that they can be toggled programmatically using Javascript   This would be preferably without using jQuery

User · Answer

Let s suppose you have a button where on clicking it  you can make all your radio button selection to false  You can write the below code inside the onclick handler  Below code take radio buttons based on class name and for each element it will mark it to false   var elements document getElementsByClassName  Button     Array prototype forEach call elements  function element      element checked   false

User · Answer

Full example in pure JavaScript     x000D   x000D  box onmouseup   function     x000D    var temp   this children 0   x000D    if  temp checked    x000D      setTimeout function     x000D        temp checked   false  x000D         0   x000D      x000D    x000D   lt label id  box  style  margin-right  1em   gt  x000D     lt input type  radio  name  chk pr  f m  d perso  value  valeur  gt  x000D    libell   x000D   lt  label gt  x000D   x000D   x000D

User · Answer

The full code will look something like this   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN     http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset utf-8    gt   lt title gt Untitled Document lt  title gt   lt  head gt    lt body gt   lt input name  radio  type  radio  id  myRadio  value  myRadio  checked  checked      onclick  setRadio this     gt   lt label for  myRadio  gt  lt  label gt     lt script language  javascript  gt  function setRadio obj         obj checked   false     lt  script gt   lt  body gt   lt  html gt

User · Answer

Extending user3716078 s answer to allow multiple independent radio button groups and a neater way of assigning event listeners to multiple elements     window onload   function          var acc checked             slice call document querySelectorAll   accordion input type  radio      forEach function el i                          i represents the integer value of where we are in the loop            el represents the element in question in the current loop                     el addEventListener  click   function e                if acc checked this name     this                    acc checked this name    this                else                   this checked   false                  acc checked this name    null                            false

User · Answer

Wrapped up in a plugin  Limitations    Require form element Must trigger click event when changing radio button programmatically    x000D   x000D   function      x000D      fn uncheckableRadio   function     x000D      var  root   this  x000D       root each function     x000D        var  radio     this   x000D        if   radio prop  checked      x000D           radio data  checked   true   x000D          else   x000D           radio data  checked   false   x000D          x000D           x000D         radio click function     x000D          var  this     this   x000D          if   this data  checked      x000D             this prop  checked   false   x000D             this data  checked   false   x000D             this trigger  change    x000D            else   x000D             this data  checked   true   x000D             this closest  form   find   name       this prop  name           not  this  data  checked   false   x000D            x000D            x000D          x000D      return  root  x000D       x000D    jQuery    x000D   x000D      type radio    uncheckableRadio    x000D     button   click function     x000D        value V2    prop  checked   true  trigger  change   trigger  click    x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt form gt  x000D     lt label gt  lt input name  myRadio  type  radio  value  V1    gt  R1 lt  label gt  x000D     lt label gt  lt input name  myRadio  type  radio  value  V2    gt  R2 lt  label gt  x000D     lt label gt  lt input name  myRadio  type  radio  value  V3    gt  R3 lt  label gt  x000D     lt button type  button  gt Change R2 lt  button gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

You could use the checked property of a radio button to uncheck it   Something like this    lt script gt   function uncheck        document getElementById  myRadio   checked   false              function check        document getElementById  myRadio   checked   true              lt  script gt   lt input id  myRadio  type  radio  checked  checked   gt   lt button onclick  uncheck     gt Uncheck lt  button gt   lt button onclick  check     gt Check lt  button gt     See it in action here  http   jsfiddle net wgYNa

User · Answer

If you use Iclick pluging  it is as simply as you see below        radio1   iCheck  uncheck

User · Answer

A working bug free update to Shmili Breuer answer    function             input type  radio   revertible    click function             var  this      this                update and remove the previous checked class         var  prevChecked      input name      this attr  name        not  checked  checked                 prevChecked removeClass  checked             if   this hasClass  checked                    this removeClass  checked                 this prop  checked   false                     else                this addClass  checked

User · Answer

while it was asked in terms of javascript  the adaption from jquery is trivial     with this method you can check for the  null  value and pass it       x000D   x000D  var checked val    null   x000D      no option   on  click   function    x000D    if   this  val      checked val   x000D        input name group  value null    prop  checked  true   x000D      checked val    null   x000D     else  x000D     checked val     this  val    x000D      x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt input type  radio  name  group  class  no option  value  0  gt option 0 lt br gt  x000D   lt input type  radio  name  group  class  no option  value  1  gt option 1 lt br gt  x000D   lt input type  radio  name  group  class  no option  value  2  gt option 2 lt br gt  x000D   lt input type  radio  name  group  class  no option  value  3  gt option 3 lt br gt  x000D   lt input type  radio  name  group  class  no option  value  4  gt option 4 lt br gt  x000D   lt input type  radio  name  group  class  no option  value  5  gt option 5 lt br gt  x000D   lt input type  radio  name  group  class  no option  value  6  gt option 6 lt br gt  x000D   lt input type  radio  name  group  class  no option  value  null  style  display none  gt  x000D   x000D   x000D

User · Answer

That s what I came to   function uncheck radio before click radio        if radio prop  checked            radio one  click   function    radio prop  checked   false             body   on  mouseup    input type  radio     function        var radio   this       uncheck radio before click radio         body   on  mouseup    label   function        var label   this       var radio      if label attr  for            radio       label attr  for    filter  input type  radio          else         radio label children  input type  radio          if radio length          uncheck radio before click radio        http   jsfiddle net 24vft2of 2

User · Answer

You can set HTML object s property checked to false like this  document getElementById  desiredInput   checked   false    Example  Hold down Ctrl    on mac  key to uncheck   x000D   x000D  var radios   document getElementsByTagName  input    for i 0  i lt radios length  i           radios i  onclick   function e            if e ctrlKey    e metaKey                this checked   false                    x000D   lt input type  radio  name  test  value  1    gt   lt input type  radio  name  test  value  2  checked  checked    gt   lt input type  radio  name  test  value  3    gt  x000D   x000D   x000D   jQuery example

User · Answer

Unfortunately it does not work in Chrome or Edge  but it does work in FireFox     document     uncheck it when clicked  on  click   input type  radio     function      this  prop  checked  false         re-check it if value is changed to this input  on  change   input type  radio     function      this  prop  checked  true

User · Answer

The code below will do the trick    x000D   x000D     input type radio    click function     x000D          if   this  hasClass  checked     x000D              this checked   false  x000D                this  removeClass  checked   x000D           else  x000D                this  addClass  checked   x000D            x000D          x000D   x000D   x000D

User · Answer

I will try to make a small answer with 3 radio buttons  you can add stuff later on   x000D   x000D  const radios   Array from document getElementsByClassName  radio     for let i of radios        i state   false      i onclick        gt            i checked   i state    i state          for let j of radios              if j     i  j checked   j state   false         x000D   lt input class  radio  type  radio  gt X  lt input class  radio  type  radio  gt Y  lt input class  radio  type  radio  gt Z x000D   x000D   x000D   This works for single form  If you have multiple form with the class  quot radio quot   then once you click on a radio button  the others are disabled  Use this if that s what you want   Now I wanted to implement this on my rails project  which has multiple forms  depends  fetched from database   each form has 2 visible radio buttons   1 hidden radio button  I want the user the select   deselect the radio button of each form  And selecting one on a form shouldn t deselect the other selected button on another form  So I rather did this   x000D   x000D  var radios   Array from document getElementsByClassName  radio     for  let i of radios      i state   false    i onclick        gt        i checked   i state    i state      for  let j of radios        if  j     i  j state   false       x000D   lt form gt     lt input class  radio  name  A  type  radio  gt A    lt input class  radio  name  A  type  radio  gt B    lt input class  radio  name  A  type  radio  gt C  lt  form gt    lt form gt     lt input class  radio  name  A  type  radio  gt D    lt input class  radio  name  A  type  radio  gt E    lt input class  radio  name  A  type  radio  gt F  lt  form gt    lt form gt     lt input class  radio  name  SOMETHING  type  radio  gt G    lt input class  radio  name  SOMETHING  type  radio  gt H    lt input class  radio  name  SOMETHING  type  radio  gt I  lt  form gt  x000D   x000D   x000D   You see all have the same name  but they are in a different forms  grouped by 3  so this works for multiple forms

User · Answer

In the radio button object creation code include these three lines     obj check2   false        add  check2   a user-defined object property   obj onmouseup   function     this check2   this checked      obj onclick   function     this checked    this check2

User · Answer

Here is the way for plain JS  which onchange and onclick events are combined  onchange for checking while onclick for unchecking   document querySelector  quot input quot   onchange   function         this onclick   function             this checked   false          this onclick   null

User · Answer

Here s an example of where it is arguably appropriate to uncheck radio buttons other than by making a new selection  I have a dictionary whose entries can be selected using a variety of indices  Which index to use is selected by means of a set of radio buttons  However  there is also a  random entry  button that the user can use if he or she just wants to browse  Leaving an index in place when the entry has been selected by means of the random entry button would be misleading  so when this button is pressed  I uncheck all of the index selection radio buttons and replace the contents of the index frame with an empty page

User · Answer

Radio buttons are meant to be used in groups  as defined by their sharing the same name attribute  Then clicking on one of them deselects the currently selected one  To allow the user to cancel a    real    selection he has made  you can include a radio button that corresponds to a null choice  like    Do not know    or    No answer      If you want a single button that can be checked or unchecked  use a checkbox   It is possible  but normally not relevant  to uncheck a radio button in JavaScript  simply by setting its checked property to false  e g    lt input type radio name foo id foo value var gt   lt input type button value  Uncheck  onclick   document getElementById  foo   checked   false  gt

User · Answer

As radio button mostly used in group  its a lot easier to grab them by getElementsByName         in your script tag   This will return an array  put an event listener on each array child and set the check state  Look at this sample    var myRadios   document getElementsByName  subscribe    var setCheck  var x   0  for x   0  x  lt  myRadios length  x          myRadios x  onclick   function            if setCheck    this                setCheck   this           else              this checked   false              setCheck   null                    This guide explain how the code works with a visual demonstration

User · Answer

I came here because I had the same issue  I wanted to present the options to the user while leaving the option of remaining empty  Although this is possible to explicitly code using checkboxes that would complicate the back end   Having the user Control click is almost as good as having them uncheck it through the console  Catching the mousedown is to early and onclick is too late   Well  at last here is a solution  Just put these few lines once on the page and you have it made for all radio buttons on the page  You can even fiddle with the selector to customize it    x000D   x000D  window onload   function     x000D    document querySelectorAll  INPUT type  radio     forEach function rd    x000D      rd addEventListener  mousedown   function     x000D        if this checked    x000D          this onclick function     x000D            this checked false x000D            x000D          else   x000D          this onclick null x000D          x000D         x000D       x000D    x000D   lt input type radio name unchecksample gt  Number One lt br gt  x000D   lt input type radio name unchecksample gt  Number Two lt br gt  x000D   lt input type radio name unchecksample gt  Number Three lt br gt  x000D   lt input type radio name unchecksample gt  Number Four lt br gt  x000D   lt input type radio name unchecksample gt  Number Five lt br gt  x000D   x000D   x000D

User · Answer

This almost worked for me     lt input type  radio  name  radioBtn  gt   lt input type  radio  name  radioBtn  gt   lt input type  radio  name  radioBtn  gt     document  on  click    input name  radioBtn     function        thisRadio     this       if  thisRadio hasClass  imChecked              thisRadio removeClass  imChecked            thisRadio prop  checked   false         else            thisRadio prop  checked   true           thisRadio addClass  imChecked                But If I check a radio button  then check another and try to check the first one again I must do two clicks  This is because it has the class imChecked  I just needed to uncheck the other radio buttons before the verification   Add this line makes it work      input name  radioBtn     not thisRadio  removeClass  imChecked      lt input type  radio  name  radioBtn  gt   lt input type  radio  name  radioBtn  gt   lt input type  radio  name  radioBtn  gt     document  on  click    input name  radioBtn     function        thisRadio     this          input name  radioBtn     not thisRadio  removeClass  imChecked        if  thisRadio hasClass  imChecked              thisRadio removeClass  imChecked            thisRadio prop  checked   false         else            thisRadio prop  checked   true           thisRadio addClass  imChecked

User · Answer

If you are looking for solution in jQuery here it is  It is similar to this  x000D   x000D         input radio   click function            let name     this  attr  name          let self     this            filter call    input name   name      function ele           return self 0        ele  0            forEach function otherEle             otherEle  removeAttr  data-check                     if   this  attr  data-check               this  prop  checked   false             this  removeAttr  data-check           else            this  attr  data-check    1                    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt form gt     lt input class  radio  name  A  type  radio  gt A    lt input class  radio  name  A  type  radio  gt B    lt input class  radio  name  A  type  radio  gt C  lt  form gt    lt form gt     lt input class  radio  name  B  type  radio  gt D    lt input class  radio  name  B  type  radio  gt E    lt input class  radio  name  B  type  radio  gt F  lt  form gt    lt form gt     lt input class  radio  name  C  type  radio  gt G    lt input class  radio  name  C  type  radio  gt H    lt input class  radio  name  C  type  radio  gt I  lt  form gt  x000D   x000D   x000D

User · Answer

I m surprised no-one has posted this  quot neat trick quot  version which doesn t use any JavaScript  it only uses CSS   x000D   x000D   radio1       display  none      wrapper          NOTE  This wrapper div is not needed provided you can position the label for  radio1 on top of  radio2 using some other technique         position  relative      radio1 not  checked      label for  radio1         position  absolute      top  0      right  0      bottom  0      left  0     radio1 checked     label for  radio1         display  none        Non-essential styles       label for   label not  for  radio1          cursor  pointer      border-radius  7px    label for  hover   label  label not  for  radio1    hover       background-color   ccc    x000D   lt input type  radio  name  group1  id  radio1  checked  checked     gt    lt p gt Look mum   lt strong gt no JavaScript  lt  strong gt  lt  p gt    lt div id  wrapper  gt       lt label for  radio1  gt  lt  label gt       lt label gt           lt input type  radio  name  group1  id  radio2    gt          You can toggle me on and off       lt  label gt   lt  div gt  x000D   x000D   x000D    Explanation    radio1   lt input type  quot radio quot  id  quot radio2 quot    gt   is always hidden  Using CSS s  checked and  not  checked  pseudo-class selectors with sibling selectors    and    allow other elements  style to be affected depending on whether or not an  lt input type  quot checkbox quot    gt  or  lt input type  quot radio quot    gt  is checked   So when  radio1 is un-checked  or when  radio2 is checked  that causes a  lt label gt  to be overlayed on-top of  radio2 and that label has for  quot radio1 quot   so clicking it will cause  radio1 to be checked  not  radio2  IMPORTANT CAVEAT  CSS s sibling selector rules only allows selectors to select elements based on their ancestors and their ancestors earlier siblings  So you cannot style an element based on any other descendants of its ancestors   This limitation will be removed when CSS4 s  has   selector function is supported but as of November 2020 only PrinceXML supports  has   and it s currently looking like  has   will be dropped from CSS4 entirely owing to the difficulty of implementation        This approach can be scaled to support multiple radio buttons   x000D   x000D   uncheckAll       display  none      uncheckAll checked     label for  uncheckAll         display  none     label       cursor  pointer     label not  for         position  relative     label for  uncheckAll         position  absolute      top  0      right  0      bottom  0      left  0     input name  group1   not  checked    label for  uncheckAll         display  none    x000D   lt input type  radio  name  group1  id  uncheckAll  checked  checked     gt    lt label gt       lt input type  radio  name  group1  id  radio2    gt       lt label for  uncheckAll  gt  lt  label gt      You can toggle me on and off   lt  label gt    lt label gt       lt input type  radio  name  group1  id  radio3    gt       lt label for  uncheckAll  gt  lt  label gt      And me   lt  label gt    lt label gt       lt input type  radio  name  group1  id  aragorn    gt       lt label for  uncheckAll  gt  lt  label gt      And my sword   lt  label gt    lt label gt       lt input type  radio  name  group1  id  gimli    gt       lt label for  uncheckAll  gt  lt  label gt      And my axe   lt  label gt  x000D   x000D   x000D

User · Answer

This is my answer  though I made it with jQuery but only for the purpose of selecting elements and to add and remove a class  so you can easily replace it with pure JS selectors  amp  pure JS add attribute    lt input type  radio  name  radioBtn  gt   lt input type  radio  name  radioBtn  gt   lt input type  radio  name  radioBtn  gt     document  on  quot click quot    quot input name  radioBtn   quot   function        thisRadio     this       if  thisRadio hasClass  quot imChecked quot              thisRadio removeClass  quot imChecked quot            thisRadio prop  checked   false         else            thisRadio prop  checked   true           thisRadio addClass  quot imChecked quot

User · Answer

Old question but people keep coming from Google here and OP asked preferably without jQuery  so here is my shot   Should works even on IE 9   x000D   x000D     iterate using Array method for compatibility x000D  Array prototype forEach call document querySelectorAll   type radio     function radio    x000D   radio addEventListener  click   function    x000D    var self   this  x000D       get all elements with same name but itself and mark them unchecked x000D    Array prototype filter call document getElementsByName this name   function filterEl    x000D     return self     filterEl  x000D       forEach function otherEl    x000D     delete otherEl dataset check x000D       x000D   x000D       set state based on previous one x000D    if  this dataset hasOwnProperty  check      x000D     this checked   false x000D     delete this dataset check x000D      else   x000D     this dataset check      x000D      x000D      false  x000D     x000D   lt label gt  lt input type  radio  name  foo  value  1   gt foo   1 lt  label gt  lt br  gt  x000D   lt label gt  lt input type  radio  name  foo  value  2   gt foo   2 lt  label gt  lt br  gt  x000D   lt label gt  lt input type  radio  name  foo  value  3   gt foo   3 lt  label gt  lt br  gt  x000D   lt br  gt  x000D   lt label gt  lt input type  radio  name  bar  value  1   gt bar   1 lt  label gt  lt br  gt  x000D   lt label gt  lt input type  radio  name  bar  value  2   gt bar   2 lt  label gt  lt br  gt  x000D   lt label gt  lt input type  radio  name  bar  value  3   gt bar   3 lt  label gt  lt br  gt  x000D   x000D   x000D

User · Answer

Most of the modern day browsers consider checked  quot anything quot  as checked  quot true quot   You might have to remove the checked attribute if that makes sense in your case  one of which might be related to when you load the page    this  removeAttr  checked    This might help you in cases when you want your radio button to be checked adhering to some condition  You can simply remove the attribute to achieve that  PS  Not helpful in all the cases

User · Answer

How unchecking radio does  not  work You cannot easily implement uncheck trivially via if this checked  this checked   false   if you really want to  see the hacker way at the end  because the events fire in this order   mousedown or keydown mouseup or keyup if not checked  set the checked property now click input  only if state is changed  change  only if state is changed   Now in which event to perform the mentioned uncheck   mouseup or mousedown  then the step 3 the value is set back to true and change and input event doesn t even fire as the state didn t change when they are called in the sequence - so you can t uncheck it here click  then the state is always false and input and change also doesn t fire - so you can t check it input or change  it doesn t fire when the state is not changed and clicking selected element doesn t change the state - so you can t do anything useful here  The naive way As you can learn from the sequence above  the way is   read the previous state in mouseup set the state in click as negation of previous state  If you want to store the previous state in data attribute  keep in mind that it is saved as string  whereas the checked attribute is boolean  So you can implement it like  radio onmouseup   function     this dataset checked   this checked  1    quot  quot     radio onclick   function     this checked    this dataset checked     It seemingly works  but you should not do this for these reasons   the user may mousedown somewhere else  then hover above radio button  then mouseup  in this case mouseup fires and click does not the user may use Tab to focus radio group  then arrows to change  mouseup doesn t fire and click does  The proper way There is another issue  dynamically added radio buttons  There are two ways   element appendChild radio  - if you enable deselect on all radios in DOMContentLoaded event  this dynamically added radio is not affected element innerHTML     lt input type  quot radio quot  gt   - effectively replaces the HTML contents of the element and re-creates DOM inside it - so all event listeners are discarded  To solve  2   I recommend onclick content attribute  Note that element onclick   fn and element setAttribute  quot onclick quot    quot fn   quot   are two different things  Also note that onclick fires everytime the user activates the radio  regardless of the interface he used  Yet another issue  if you enable deselect  then you should also enable switching by Space to mimic checkboxes behaviour  The following code solves all mentioned issues   x000D   x000D  function deselectableRadios rootElement      if  rootElement  rootElement   document    if  window radioChecked  window radioChecked   null    window radioClick   function e        const obj   e target      if e keyCode  return obj checked   e keyCode  32      obj checked   window radioChecked    obj      window radioChecked   obj checked   obj   null        rootElement querySelectorAll  input type  radio     forEach  radio   gt        radio setAttribute  onclick    radioClick event         radio setAttribute  onkeyup    radioClick event              deselectableRadios    x000D   lt label gt  lt input type  radio  name  tag1  gt one lt  label gt   lt label gt  lt input type  radio  name  tag1  gt two lt  label gt   lt label gt  lt input type  radio  name  tag1  gt three lt  label gt   lt label gt  lt input type  radio  name  tag1  gt four lt  label gt  x000D   x000D   x000D   Now you can call deselectableRadios   anytime you dynamically add content and calling it on radios multiple times doesn t break it  You can also specify the rootElement to update only a subtree of HTML DOM and make your web faster  If you don t like the global state  you can use the hacker way  The hacker way The point is to abuse setTimeout on mouseup to call it after the checked property is set  function deselectable       setTimeout checked   gt  this checked    checked  0  this checked      Now you can make any radio button deselectable  radio onmouseup   deselectable   But this simple one-liner works just with clicking and doesn t solve the issues mentioned above  The modern way Deselectable radio is basically checkbox where only one in the group can be checked  If your browser supports the appearance CSS4 feature  you can simply  lt input type  quot checkbox quot  name  quot foo quot  style  quot appearance  radio quot  gt   and then in onclick event getElementsByName  quot foo quot   and uncheck all remaining checkboxes of the name  checkboxes doesn t send value if they are not checked

[javascript] How to make a radio button unchecked by clicking it?

Examples related to javascript

Examples related to html

Examples related to radio-button