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

IT技术 javascript jquery radio-button
2021-01-15 02:54:20

问题是此解决方案仅适用于 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/

5个回答

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

如果页面加载时已检查输入,则此示例要求您单击单选按钮两次。
2021-04-14 02:54:20

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

+1,编写 jquery 以将一组复选框限制为特定计数的最大值(在您的场景中为 1)要容易得多
2021-03-15 02:54:20
在这里检查这在所有浏览器中都有效。http://jsfiddle.net/f4vXj/2/
2021-03-24 02:54:20
办公室 我可以做到,btu 我已经有单选按钮和复选框的 css 能够充当单选按钮,我也需要编写 javascript,虽然它并不难,但是,我只是想知道这是否可能做没有变量。
2021-04-05 02:54:20
在我的场景中,如果用户对问题 1 回答“是”,那么他必须回答问题 2。如果他回答问题 2,则改变主意到问题 1 我想取消选中他对问题 2 的回答,以便他可以看到它没有影响,并且使逻辑更容易。不要仅仅因为您不需要做某事就假设没有必要做某事。
2021-04-05 02:54:20
两者之间有一个场景。一组复选框允许检查组内零和所有选项之间的任何位置。一个无线电组只允许零或一,但一旦你选择了一个,就没有办法回到零。我相信,问题是我们如何允许用户将选中的单选按钮归零。
2021-04-09 02:54:20

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

它不必说“无”。如果您想允许您的用户,例如不指定性别,那么您可以有一个标记为“未指定”的单选按钮。您正在寻找的行为是否会导致单击已选择的单选按钮未选中?
2021-04-01 02:54:20
组标签使我变得容易和工作。谢谢。
2021-04-03 02:54:20
技术含量较低的说明:我认为您会发现“无”是完全有效的性别。不幸的是,用户体验的需求往往排除了收集人口统计数据的最政治正确的方法。使用一个常见用例的示例:基于自由文本字段显示分段广告比基于多项选择更具挑战性,如果选择仅限于最受欢迎的广告,则更容易。您不希望人们仅仅通过在您的表单上选择非二元性别来选择退出有针对性的广告。其他人在编码时会问这些问题吗?
2021-04-06 02:54:20
选择框也可能是一个选项。默认为“未指定”
2021-04-10 02:54:20

试试这个

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

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

它不会允许您取消选择已选择。
2021-03-15 02:54:20
如果您在同一页面上有多个单选按钮组,这将是一个坏主意。
2021-03-28 02:54:20
似乎此解决方案不再有效。
2021-04-06 02:54:20

试试这个

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

谢谢,但我需要没有变量的解决方案,这里有变量是jsfiddle.net/wuAWn/12
2021-03-18 02:54:20
@user2486415 试试这个..它也取消选中
2021-03-26 02:54:20
谢谢,这是一个不错的解决方案,但是有问题,请尝试单击 1,2,3 然后再次单击 1,2,3
2021-04-05 02:54:20
@user2486415 现在我更新了它再试一次jsfiddle.net/wuAWn/10
2021-04-13 02:54:20