How to uncheck checked radio button [duplicate]

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/

Answer 1

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

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

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