如何在 jQuery 中重置单选按钮以便不检查任何单选按钮

Posted 2023-05-09

【中文标题】如何在 jQuery 中重置单选按钮以便不检查任何单选按钮

【英文标题】：How to reset radiobuttons in jQuery so that none is checked

【发布时间】：2010-11-01 21:43:27

【问题描述】：

我在 html 中有这样的单选按钮：

<td>
    <input id="radio1" type="radio" name="correctAnswer" value="1">1</input>
    <input id="radio2" type="radio" name="correctAnswer" value="2">2</input>
    <input id="radio3" type="radio" name="correctAnswer" value="3">3</input>
    <input id="radio4" type="radio" name="correctAnswer" value="4">4</input>
</td>

这是在表单标签中，当用户提交表单时，我想让所有单选按钮恢复默认值。这意味着他们都没有检查过。

我有这个代码，但它给出了一个错误提示 [0] is null or not an object

$('input[@name="correctAnswer"]')[0].checked = false;
$('input[@name="correctAnswer"]')[1].checked = false;
$('input[@name="correctAnswer"]')[2].checked = false;
$('input[@name="correctAnswer"]')[3].checked = false;

我在 IE 6 中这样做。

【问题讨论】：

如果@lambackk 的回答对您不起作用，请查看 JQuery 站点上的错误跟踪器 [bugs.jquery.com/ticket/10910]。如果您（就像我一样...）循环遍历一组单选按钮以尝试将它们全部重置为默认值，则 #(selector).prop('checked',true); 在尝试将同一组中的后续单选按钮设置为未检查状态。诀窍是仅将单选按钮设置为选中状态，然后让单选按钮组执行其功能（取消选中其他按钮...）。此外，调用 $(selector).click(); 有效，并且会触发任何关联事件。

【参考方案1】：

在 1.6 之前的 jQuery 版本中使用：

$('input[name="correctAnswer"]').attr('checked', false);

在 1.6 之后的 jQuery 版本中，您应该使用：

$('input[name="correctAnswer"]').prop('checked', false);

但如果您使用的是 1.6.1+，则可以使用第一种形式（参见下面的注释 2）。

注意 1：重要的是第二个参数是 false 而不是 "false"，因为 "false" 不是一个虚假值。即

if ("false") 
    alert("Truthy value. You will see an alert");

注意 2： 从 jQuery 1.6.0 开始，现在有两个类似的方法，.attr 和 .prop，它们执行两个相关但略有不同的事情。如果在这种特殊情况下，如果您使用 1.6.1+，则上述建议有效。以上不适用于 1.6.0，如果您使用的是 1.6.0，则应升级。如果您想了解详细信息，请继续阅读。

详细信息： 当使用直接的 HTML DOM 元素时，DOM 元素附加了一些属性（checked、type、value 等），这些属性为运行提供了一个接口HTML 页面的状态。还有.getAttribute/.setAttribute 接口，它提供对HTML 中提供的HTML 属性值的访问。在 1.6 之前，jQuery 通过提供一种方法 .attr 来访问这两种类型的值，从而模糊了区别。 jQuery 1.6+ 提供了两种方法，.attr 和.prop 来区分这些情况。

.prop 允许您在 DOM 元素上设置属性，而.attr 允许您设置 HTML 属性值。如果您正在使用普通 DOM 并将选中的属性 elem.checked 设置为 true 或 false 您将更改运行值（用户看到的内容）并且返回的值跟踪页面状态。 elem.getAttribute('checked') 但是只返回初始状态（并根据 HTML 的初始状态返回 'checked' 或 undefined）。在 1.6.1+ 中使用 .attr('checked', false) 会同时执行 elem.removeAttribute('checked') 和 elem.checked = false 因为更改导致了很多向后兼容性问题，并且它无法真正判断您是要设置 HTML 属性还是 DOM 属性。在documentation for .prop 中查看更多信息。

【讨论】：

第二个参数传递 false 而不是 "false" 很重要。

第二个参数的“false”很重要，因为第二个参数是要设置的值。如果第二个参数为空，则表示给我匹配选择器的第一个元素的值。

@Noldorin - “真相”是一个完美的词。 （你能提出一种更好的方式来表达“真实”的概念——只用一个词吗？）

嘿，也许够公平。我们都可能明白这一点，尽管我个人甚至更喜欢更正式的“真实”或“语义真实”。

@Noldorin “Truthy”和“falsy”是许多 javascript 专家使用的术语，包括 Brendan Eich 和 Douglass Crockford。由于boolean evaluations are defined by the 6 falsy values，关键术语是虚假的。 Truthy 是 falsy 的反义词的逻辑名称。我认为 falsy 的使用是故意让你认为这可能不是你习惯的（尤其是来自其他 0 为假的 C 风格语法语言）。

【参考方案2】：

在 jquery 中设置单选按钮状态的最佳方法：

HTML：

<input type="radio" name="color" value="orange" /> Orange 
<input type="radio" name="color" value="pink" /> Pink 
<input type="radio" name="color" value="black" /> Black
<input type="radio" name="color" value="pinkish purple" /> Pinkish Purple

Jquery (1.4+) 代码预选一个按钮：

var presetValue = "black";
$("[name=color]").filter("[value='"+presetValue+"']").attr("checked","checked");

在 Jquery 1.6+ 代码中，首选 .prop() 方法：

var presetValue = "black";
$("[name=color]").filter("[value='"+presetValue+"']").prop("checked",true);

取消选择按钮：

$("[name=color]").removeAttr("checked");

【参考方案3】：

您的问题是属性选择器不是以@ 开头的。

试试这个：

$('input[name="correctAnswer"]').attr('checked', false);

【参考方案4】：

$('#radio1').removeAttr('checked');
$('#radio2').removeAttr('checked');
$('#radio3').removeAttr('checked');
$('#radio4').removeAttr('checked');

Or

$('input[name="correctAnswer"]').removeAttr('checked');

【参考方案5】：

最后经过大量测试，我认为最方便快捷的预设方式是：

var presetValue = "black";
$("input[name=correctAnswer]").filter("[value=" + presetValue + "]").prop("checked",true);
$("input[name=correctAnswer]").button( "refresh" );//JQuery UI only

JQueryUI 对象需要刷新。

检索值很容易：

alert($('input[name=correctAnswer]:checked').val())

使用 JQuery 1.6.1、JQuery UI 1.8 测试。

【参考方案6】：

我知道这已经过时并且有点离题，但假设您只想取消选中集合中的特定单选按钮：

$("#go").click(function()
    $("input[name='correctAnswer']").each(function()
      if($(this).val() !== "1")
        $(this).prop("checked",false);
      
    );
  );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="radio1" type="radio" name="correctAnswer" value="1">1</input>
<input id="radio2" type="radio" name="correctAnswer" value="2">2</input>
<input id="radio3" type="radio" name="correctAnswer" value="3">3</input>
<input id="radio4" type="radio" name="correctAnswer" value="4">4</input>
<input type="button" id="go" value="go">

如果你正在处理一个单选按钮列表，你可以使用 :checked 选择器来获得你想要的。

$("#go").click(function()
  $("input[name='correctAnswer']:checked").prop("checked",false);
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="radio1" type="radio" name="correctAnswer" value="1">1</input>
<input id="radio2" type="radio" name="correctAnswer" value="2">2</input>
<input id="radio3" type="radio" name="correctAnswer" value="3">3</input>
<input id="radio4" type="radio" name="correctAnswer" value="4">4</input>
<input type="button" id="go" value="go">

【参考方案7】：

虽然prop改变了checked状态但是改变也显示在form中。

$('input[name="correctAnswer"]').prop('checked', false).change();

【参考方案8】：

通过 jquery 检查单选按钮集：

<div id="somediv" >
 <input type="radio" name="enddate" value="1"  />
 <input type="radio" name="enddate" value="2"  />
 <input type="radio" name="enddate" value="3"  />
</div>

jquery 代码：

$('div#somediv input:radio:nth(0)').attr("checked","checked");

【参考方案9】：

如果你想清除 DOM 中的所有单选按钮：

$('input[type=radio]').prop('checked',false);

【参考方案10】：

<div id="radio">
<input type="radio" id="radio1" name="radio"/><label for="radio1">Bar Chart</label>
<input type="radio" id="radio2" name="radio"/><label for="radio2">Pie Chart</label>
<input type="radio" id="radio3" name="radio"/><label for="radio3">Datapoint Chart</label>
</div>

$('#radio input').removeAttr('checked');
// Refresh the jQuery UI buttonset.                  
$( "#radio" ).buttonset('refresh');

【参考方案11】：

你在哪里：<input type="radio" name="enddate" value="1" />

在 value="1" 之后你也可以只添加unchecked =" false" />

该行将是：

<input type="radio" name="enddate" value="1" unchecked =" false" />

【讨论】：

嘿，我认为你的答案不完整。

【参考方案12】：

将所有单选按钮设置回默认值：

$("input[name='correctAnswer']").checkboxradio( "refresh" );

【讨论】：

函数 checkboxradio() 在 jQuery 2.x 中没有定义。这是您使用的扩展程序吗？

【参考方案13】：

你为什么不这样做：

$("#radio1, #radio2, #radio3, #radio4").checked = false;

【讨论】：

您不能只在 jQuery 调用返回的数组上设置选中的属性，您必须使用 attr() 函数在数组中的项目上设置该属性。

这不是“未选中”