javascript - 如何取消选中单选按钮

Question

问题是这个解决方案仅适用于 Firefox

$(':radio').on("change", function(event) {
  $(this).prop('checked', true);
});

$(':radio').on("click", function(event) {
  $(this).prop('checked', false);
});

在 Chrome 中，它不允许您选择任何内容 http://jsfiddle.net/wuAWn/

Ofc，我可以使用变量并编写类似的内容

var val = -1;
$(':radio').on("click", function() {
  if($(this).val() == val) {
    $(this).prop('checked', false);
    val = -1;
  }
  else val = $(this).val();
});

但是我的页面上会有几个单选按钮组，并且 html 内容是通过 ajax 加载的，所以我想为所有这些单选按钮组编写 1 个函数，而不是为每个单选按钮组定义变量并为每个单选按钮组编写相同的函数每个单选按钮组。

编辑:感谢您对复选框的帮助，但是要使复选框充当单选按钮组，您需要编写附加的 javascrip 来取消选中所有其他具有相同名称 onclick 的复选框，我已经有了单选按钮 css 并且更容易我只是添加类似类似复选框的类并使其看起来像复选框，我使用统一库进行自定义外观，无论如何，这是我奇怪的解决方案 http://jsfiddle.net/wuAWn/9/

Answer 1

这个简单的脚本允许您取消选中已选中的单选按钮。适用于所有支持 JavaScript 的浏览器。

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'>