如何取消选中已选中的单选按钮

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个函数,而不是为每个单选按钮组定义变量并为每个单选按钮编写相同的函数组.

编辑:感谢您对复选框的帮助,但是对于充当单选按钮组的复选框,您需要编写adittional javascrip,取消选中具有相同名称的所有其他复选框onclick,我已经有单选按钮css,对我来说更容易添加像look-like-checkbox这样的类,让它看起来像复选框,我使用统一的库来定制外观,无论如何这里是我奇怪的解决方案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'>

Answer 2

单选按钮是必需的选项...如果您想要取消选中它们,请使用复选框,不需要复杂化并允许用户取消选中单选按钮; 删除JQuery允许您从其中一个中进行选择

Answer 3

您可以考虑为标有"无"之类的每个组添加一个额外的单选按钮.这可以创建一致的用户体验,而不会使开发过程复杂化.