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


136

我有这样的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中执行此操作。


如果@lambacck的答案对您不起作用,请在JQuery网站[ bugs.jquery.com/ticket/10910]上查看错误跟踪器。如果您正在循环浏览一组单选按钮以尝试将它们全部重置为默认值,则#(selector).prop('checked',true);在尝试将同一组中的后续单选按钮设置为未检查状态时会失败。诀窍是仅将单选按钮设置为选中状态,然后让单选按钮组执行其操作(取消选中其他按钮...)。同样,调用会$(selector).click();起作用,并且会触发任何关联事件。
卡尼斯·卡利斯

Answers:


270

在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元素(属性checkedtypevalue等),其提供到HTML页面的运行状态的接口。还有.getAttribute/ .setAttribute接口,可以访问HTML中提供的HTML属性值。在1.6之前,jQuery通过提供一种.attr访问两种类型的值的方法来模糊区分。jQuery的1.6 +提供了两种方法,.attr.prop得到这些情况加以区分。

.prop允许您在DOM元素上设置属性,而.attr允许您设置HTML属性值。如果您使用纯DOM并将选中属性设置elem.checkedtruefalse,则更改运行值(用户看到的内容),并且返回的值将跟踪页面状态。elem.getAttribute('checked')但是仅返回初始状态(并根据HTML的初始状态返回'checked'或返回undefined)。在1.6.1+中,使用.attr('checked', false)两者兼有,elem.removeAttribute('checked')并且elem.checked = false由于更改引起了许多向后兼容性问题,因此无法真正确定要设置HTML属性还是DOM属性。请参阅.prop文档中的更多信息。


对于第二个参数,传递false而不是“ false”很重要。
Casebash 2010年

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

1
@Noldorin-“ Truthy”是一个完美的单词。(您能提出一种表达“真实”概念的更好方法-仅使用一个词吗?)
nnnnnn

呵呵,也许还算公平。尽管我个人更愿意使用更正式的“真实”或“语义上真实”,但我们所有人都可能会明白这一点。
Noldorin 2012年

3
@Noldorin“ Truthy”和“ falsy”是许多Javascript专家使用的术语,包括Brendan EichDouglass Crockford。关键术语是虚假的,因为布尔值由6个虚假值定义。Truthy是反义词的逻辑名称。我认为使用falsy是故意使您认为这可能不是您所习惯的(特别是如果来自其他C样式语法语言,其中0为false)。
兰巴克2012年

53

在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");

10

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

试试这个:

$('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');

4

最后,经过大量测试,我认为最方便,最有效的预设方式是:

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


2

我知道这已经很老了,这与主题无关,但是假设您只想取消选中集合中的特定单选按钮:

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

0

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

0

如果要清除DOM中的所有单选按钮,请执行以下操作:

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


0
<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');


-1

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

在value =“ 1”之后,您也可以添加 unchecked =" false" />

该行将是:

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

1
嘿,我认为您的答案不完整。
2012年

-2

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

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

函数checkboxradio()在jQuery 2.x中未定义。这是您正在使用的扩展程序吗?
justdan23

-3

你为什么不这样做:

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

1
您不仅可以在jQuery调用返回的数组上设置checked属性,还必须使用attr()函数在数组中的项目上设置该属性。
bdukes

这不是在进行“未经检查”
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.