如何重置 jQuery 中的单选按钮，使其不被检查

我在 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;

我在 IE6中这样做。

278760 次浏览
小开

你为什么不这样做:

$("#radio1, #radio2, #radio3, #radio4").checked = false;
小开
最佳答案

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

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

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

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

但是如果你使用的是1.6.1 + ，你可以使用第一种形式(见下面的注释2)。

注1: 第二个参数必须是 假的而不是 “假”，因为 “假”不是假值。也就是说。

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')和 .attr0，因为这个更改导致了许多向后兼容性问题，而且它实际上不能分辨您是想设置 HTML 属性还是 DOM 属性。请参阅 .attr1中的更多信息。

小开

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

试试这个:

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

通过 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");
小开

在 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 + 代码中，. prom ()方法是首选的:

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

取消选择按钮:

$("[name=color]").removeAttr("checked");
小开 
$('#radio1').removeAttr('checked');
$('#radio2').removeAttr('checked');
$('#radio3').removeAttr('checked');
$('#radio4').removeAttr('checked');


Or


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

最后，经过大量的测试，我认为最方便和有效的预置方法是:

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进行测试。

小开

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

在 value = “1”之后，还可以添加 unchecked =" false" />

接下来的台词是:

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

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

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

如果要清除 DOM 中的所有单选按钮:

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

小开 
<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');
小开

我知道这有点老套，而且有点跑题，但是假设您只想取消选中集合中特定的单选按钮:

$("#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">

如果您正在处理单选按钮列表，您可以使用: 勾选选择器来得到您想要的选择器。

$("#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">
小开

道具虽然改变了检查状态，但改变也表明在形式上。

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

提交答案