33

问题是这个解决方案只在 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/

4

5 回答 5

37

这个简单的脚本允许您取消选中已选中的单选按钮。适用于所有启用 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'>

于 2013-06-15T13:07:33.377 回答
12

单选按钮是必需的选项...如果您希望取消选中它们，请使用复选框，无需使事情复杂化并允许用户取消选中单选按钮；删除 JQuery 允许您从其中之一中进行选择

于 2013-06-15T05:45:14.277 回答
8

您可以考虑为每个标有“无”或类似名称的组添加一个额外的单选按钮。这可以在不使开发过程复杂化的情况下创建一致的用户体验。

于 2013-06-15T06:23:42.633 回答
4

尝试这个

所有收音机的单一功能都有“单选按钮”类

在 chrome 和 FF 中工作

$('.radio-button').on("click", function(event){
  $('.radio-button').prop('checked', false);
  $(this).prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type='radio' class='radio-button' name='re'>
<input type='radio'  class='radio-button' name='re'>
<input type='radio'  class='radio-button' name='re'>

于 2013-06-15T06:13:23.957 回答
0

尝试这个

var radio_button=false;
$('.radio-button').on("click", function(event){
  var this_input=$(this);
  if(this_input.attr('checked1')=='11') {
    this_input.attr('checked1','11')
  } else {
    this_input.attr('checked1','22')
  }
  $('.radio-button').prop('checked', false);
  if(this_input.attr('checked1')=='11') {
    this_input.prop('checked', false);
    this_input.attr('checked1','22')
  } else {
    this_input.prop('checked', true);
    this_input.attr('checked1','11')
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type='radio' class='radio-button' name='re'>
<input type='radio' class='radio-button' name='re'>
<input type='radio' class='radio-button' name='re'>

于 2013-06-15T06:33:46.900 回答