How to uncheck checked radio button

Question

The thing is this solution work only in firefox      radio   on  change   function event        this  prop  checked   true            radio   on  click   function event        this  prop  checked   false         In chrome  it wont allow you to select anything http   jsfiddle net wuAWn   Ofc  i could use variable and write something like  var val   -1      radio   on  click   function       if   this  val      val          this  prop  checked   false       val   -1        else val     this  val          But i will have few radio button groups on my page and html content is loaded through ajax  so i would like to wrtite 1 function for all of them  instead of defining variables for every one radio button group and write same function for every radio button group   Edit  thanks for your help with checkboxes  but for checkboxes to act as a radio button group  you need to write adittional javascrip that will uncheck all other checkboxes with same name onclick  i have already radio button css and its easier for me just to add class like look-like-checkbox and make it look like checkbox  i use uniform library for custom look  anyway here is my weird solution http   jsfiddle net wuAWn 9

User · Answer

This simple script allows you to uncheck an already checked radio button. Works on all javascript enabled browsers.

_x000D_

var allRadios = document.getElementsByName('re');_x000D_
var booRadio;_x000D_
var x = 0;_x000D_
for(x = 0; x < allRadios.length; x++){_x000D_
  allRadios[x].onclick = function() {_x000D_
    if(booRadio == this){_x000D_
      this.checked = false;_x000D_
      booRadio = null;_x000D_
    } else {_x000D_
      booRadio = this;_x000D_
    }_x000D_
  };_x000D_
}

_x000D_

<input type='radio' class='radio-button' name='re'>_x000D_
<input type='radio' class='radio-button' name='re'>_x000D_
<input type='radio' class='radio-button' name='re'>

_x000D_

User · Answer

try this  single function for all radio have class  radio-button   work in chrome and FF   x000D   x000D      radio-button   on  click   function event   x000D        radio-button   prop  checked   false   x000D      this  prop  checked   true   x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 10 1 jquery min js  gt  lt  script gt  x000D   lt input type  radio  class  radio-button  name  re  gt  x000D   lt input type  radio   class  radio-button  name  re  gt  x000D   lt input type  radio   class  radio-button  name  re  gt  x000D   x000D   x000D

User · Answer

try this   x000D   x000D  var radio button false  x000D      radio-button   on  click   function event   x000D    var this input   this   x000D    if this input attr  checked1     11     x000D      this input attr  checked1   11   x000D      else   x000D      this input attr  checked1   22   x000D      x000D        radio-button   prop  checked   false   x000D    if this input attr  checked1     11     x000D      this input prop  checked   false   x000D      this input attr  checked1   22   x000D      else   x000D      this input prop  checked   true   x000D      this input attr  checked1   11   x000D      x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 10 1 jquery min js  gt  lt  script gt  x000D   lt input type  radio  class  radio-button  name  re  gt  x000D   lt input type  radio  class  radio-button  name  re  gt  x000D   lt input type  radio  class  radio-button  name  re  gt  x000D   x000D   x000D

User · Answer

You might consider adding an additional radio button to each group labeled  none  or the like   This can create a consistent user experience without complicating the development process

User · Answer

Radio buttons are meant to be required options    If you want them to be unchecked  use a checkbox  there is no need to complicate things and allow users to uncheck a radio button  removing the JQuery allows you to select from one of them

[javascript] How to uncheck checked radio button

Examples related to javascript

Examples related to jquery

Examples related to radio-button