如何默认选中单选按钮？

Question

我有一些单选按钮，我想在页面加载时将其中一个默认设置为选中状态。如何实现？

<input type="radio" name="imgsel"  value=""  /> 

- jslearner

Answer 1

XHTML解决方案：

<input type="radio" name="imgsel" value="" checked="checked" />

请注意，实际的checked属性值并不重要；将"checked"赋值只是一种约定。最重要的是，像"true"或"false"这样的字符串没有任何特殊含义。

如果您不需要遵循XHTML标准，可以将代码简化为：

<input type="radio" name="imgsel" value="" checked>

- Shakti Singh

---

将单选按钮的初始值分配为已选中的副本。 - RPB

同样重要的是要知道这个问题：您需要确保此单选按钮组中的其他输入都不包含标记checked="false"或单独的"checked"。否则，页面上出现的最后一个将被选中。只有您想要默认选择的那个应该具有包含"checked"的任何标记。 - nfriend21

如果问题仍然存在，您应该添加属性 autocomplete="off" 强制浏览器设置默认值。 - J.BizMai

“空属性”在当前的HTML 5.2推荐规范中仍然有效。 - handle

哪个更好，checked="checked" 还是只用 checked？ - OMNIA Design and Marketing

@OMNIADesignandMarketing checked="checked"更好，因为它在HTML和XHTML中都被接受。而且它比空的checked属性看起来更好！ - mahfuz

Answer 2

使用checked属性。

<input type="radio" name="imgsel"  value="" checked /> 

或者

<input type="radio" name="imgsel"  value="" checked="checked" /> 

- mdm

---

<input type="radio" name="imgsel" value="" checked="false" /> 这段代码也会使按钮被选中。 - FutureNerd

我建议只使用 checked 或 checked="checked"，强烈反对使用 "true"，因为它暗示着 "false" 会产生相反的效果... 而实际上并不是这样。 - Ryan Wheale

第一个选项是正确答案。布尔属性不应该有值。 - nucleartide

两种说法都正确。XHTML需要第二个版本，而HTML则允许使用任意一种版本。 - triunenature

这是否意味着 checked="checked" 更好？ - OMNIA Design and Marketing

不，只是它更具有向后兼容性。但XHTML已经有点过时了... - Stijn de Witt

Answer 3

这并不完全回答问题，但对于任何试图实现此功能的AngularJS用户，答案略有不同。实际上，常规答案不起作用（至少对我而言）。

您的HTML将与普通单选按钮非常相似：

<input type='radio' name='group' ng-model='mValue' value='first' />First
<input type='radio' name='group' ng-model='mValue' value='second' /> Second

在您的控制器中，您将声明与单选按钮相关联的mValue。要预先选择其中一个单选按钮，请将与该组关联的$scope变量分配给所需输入的值：

$scope.mValue="second"

这将使得页面加载时"第二个"单选框被选中。

编辑：自从AngularJS 2.x版本以后

如果您使用的是2.x及以上版本，则上述方法不起作用。相反，请使用如下ng-checked属性：

<input type='radio' name='gender' ng-model='genderValue' value='male' ng-checked='genderValue === male'/>Male
<input type='radio' name='gender' ng-model='genderValue' value='female' ng-checked='genderValue === female'/> Female

- discodane

---

在阅读您的评论之前，我很惊讶所接受的答案没有起作用。与您一样，我正在使用AngularJS，这个方法非常有效！ - James

在我的情况下，也使用了angularjs，我有一个值，但是我必须将其更改为ng-value才能正常工作。 - Elaine K

啊，是的。需要注意的是，这是针对Angular 1.x而不是更高版本的答案。 - discodane

这个回答应该被删除，因为它并没有回答问题。 - I am the Most Stupid Person

是的，我正在使用AngularJS，之前的答案都没有起作用，我尝试了你的第二个答案，它起作用了。 - agileDev

Answer 4

添加这个属性：

checked="checked"

- Gerben Jacobs

Answer 5

他们几乎已经做到了...就像复选框一样，你只需要添加checked="checked"属性，就像这样：

<input type="radio" checked="checked">

...然后你就得到了它。

干杯！

- Rohjay