如何取消选中单选按钮？

20 浏览
0 Comments

如何取消选中单选按钮？

我有一个单选按钮组，我想在使用jQuery提交AJAX表单后取消选中它们。我有以下函数：\n

function clearForm(){
  $('#frm input[type="text"]').each(function(){
      $(this).val("");  
  });
  $('#frm input[type="radio":checked]').each(function(){
      $(this).checked = false;  
  });
 }

\n通过这个函数的帮助，我可以清除文本框中的值，但是无法清除单选按钮的值。\n顺便说一下，我也尝试过$(this).val(\"\");但是没有起作用。

0

3 答案

0 Comments

问题出现的原因：在2010年之前，取消选中一个单选按钮的常用方法是使用removeAttr('checked')，因为很多浏览器会将'checked=anything'解释为true，这种方法可以完全移除checked属性。但是自那时起，这种方法已经被弃用。

解决方法：使用removeAttr('checked')来取消选中一个单选按钮。代码如下：

$(this).removeAttr('checked')

同时，不需要使用each函数，可以直接将removeAttr的调用链接到选择器上。

0
0 Comments

问题的原因是要取消选中一个单选按钮，但是不清楚应该使用哪种方法。解决方法是使用以下代码：

$("input:radio").prop("checked", false);

或者

$("input:radio").removeAttr("checked");

同样的方法也适用于取消文本框的内容：

$('#frm input[type="text"]').val("");

不过可以进一步改进这个方法：

$('#frm input:text').val("");

使用.removeAttr可能会导致问题。

有没有详细说明一下是什么问题？或者提供一个链接？

是的，Kzqai，我也很好奇为什么我的回答因为这个问题被投票下降。文档中没有提到任何风险。

相关文档实际上是关于.prop()方法：api.jquery.com/prop 引用：“属性通常会影响DOM元素的动态状态，而不会更改序列化的HTML属性。例如，input元素的value属性，input和按钮的disabled属性，或复选框的checked属性。应该使用.prop()方法来设置disabled和checked，而不是使用.attr()方法。应该使用.val()方法来获取和设置值。”这意味着...

...这意味着.attr()将更改不同的底层源代码，而不是.prop()，即更改序列化的html属性而不是DOM。虽然现在可能是兼容的（例如，当使用.attr()时，jQuery 1.9可能会同时修改两者），但不能保证在将.prop()作为规范时，将来仍然会同时修改两者。例如，如果你使用.attr('checked', false);，而你使用的库包含.prop('checked', true);，就会产生固有的冲突，可能会导致烦人的错误。

0
0 Comments

问题的出现的原因：

该问题的出现是因为需要取消选中一个单选按钮，即将其状态从选中改为未选中。在网页开发中，通常使用JavaScript或jQuery来操作页面元素，包括单选按钮。因此，需要找到一种方法来取消选中单选按钮。

解决方法：

1. 使用纯JavaScript的方法：

this.checked = false;

这种方法直接将单选按钮的checked属性设置为false，从而取消选中。

2. 使用jQuery的方法：

$(this).prop('checked', false);

注意，使用jQuery 1.6之前的版本时，可以使用$(this).attr('checked', false);来取消选中。

可以参考jQuery prop()帮助页面来了解attr()和prop()之间的区别以及为什么现在更推荐使用prop()方法。

prop()方法是在2011年5月的jQuery 1.6版本中引入的。

对于是否在此处使用纯JavaScript的问题：

如果你的系统已经建立在jQuery上，那么使用jQuery的额外好处是，如果有任何一个浏览器以不同的方式处理这个问题，你将能够将浏览器的支持委托给jQuery库。然而，如果你的软件目前没有使用jQuery，为了这个问题而引入整个库可能不值得。

Hedlund：我想你是在暗示目前所有主要浏览器都以相同的方式处理这个问题，对吗？

在我的Chrome浏览器中，使用jQuery 1.9版本时，jQuery的方法对我没有效果。但是纯JavaScript的方法确实有效。

你的问题可能出在其他地方。可以参考这个简单的演示，使用jQuery 1.9。在我的Chrome浏览器中可以正常工作。

截至2020年，这种方法仍然有效。你可以试试看。

0