如何在 jQuery 中重置单选按钮，以便不选中任何单选按钮 [英] How to reset radiobuttons in jQuery so that none is checked

问题描述

我在 HTML 中有这样的单选按钮:

I have radio buttons in HTML like this:

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

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

This is in a form tag, and when user submits a form I want to make all the radio buttons back to the default. Meaning none of them checked.

我有这个代码，但它给出了一个错误，说[0] 为空或不是一个对象

I have this code but it gives an error saying [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 中这样做.

I am doing this in IE 6.

推荐答案

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

In versions of jQuery before 1.6 use:

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

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

In versions of jQuery after 1.6 you should use:

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

但如果您使用的是 1.6.1+，则可以使用第一种形式(请参阅下面的注释 2).

but if you are using 1.6.1+ you can use the first form (see note 2 below).

注意 1:第二个参数是 false 而不是 false" 很重要，因为 false" 不是假值.即

Note 1: it is important that the second argument be false and not "false" since "false" is not a falsy value. i.e.

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，您应该升级.如果您需要详细信息，请继续阅读.

Note 2: As of jQuery 1.6.0, there are now two similar methods, .attr and .prop that do two related but slightly different things. If in this particular case, the advice provide above works if you use 1.6.1+. The above will not work with 1.6.0, if you are using 1.6.0, you should upgrade. If you want the details, keep reading.

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

Details: When working with straight HTML DOM elements, there are properties attached to the DOM element (checked, type, value, etc) which provide an interface to the running state of the HTML page. There is also the .getAttribute/.setAttribute interface which provides access to the HTML Attribute values as provided in the HTML. Before 1.6 jQuery blurred the distinction by providing one method, .attr, to access both types of values. jQuery 1.6+ provides two methods, .attr and .prop to get distinguish between these situations.

.prop 允许您在 DOM 元素上设置属性，而 .attr 允许您设置 HTML 属性值.如果您使用普通 DOM 并将检查属性 elem.checked 设置为 true 或 false，则您可以更改运行值(用户看到)并且返回的值跟踪页面状态.elem.getAttribute('checked') 然而只返回初始状态(并根据初始状态返回 'checked' 或 undefinedHTML).在 1.6.1+ 中使用 .attr('checked', false) 做 elem.removeAttribute('checked') 和 elem.checked = falsecode> 因为更改导致了很多向后兼容性问题，它无法真正判断您是要设置 HTML 属性还是 DOM 属性.在.prop 文档中查看更多信息.

.prop allows you to set a property on a DOM element, while .attr allows you to set an HTML attribute value. If you are working with plain DOM and set the checked property, elem.checked, to true or false you change the running value (what the user sees) and the value returned tracks the on page state. elem.getAttribute('checked') however only returns the initial state (and returns 'checked' or undefined depending on the initial state from the HTML). In 1.6.1+ using .attr('checked', false) does both elem.removeAttribute('checked') and elem.checked = false since the change caused a lot of backwards compatibility issues and it can't really tell if you wanted to set the HTML attribute or the DOM property. See more information in the documentation for .prop.

这篇关于如何在 jQuery 中重置单选按钮，以便不选中任何单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！