默认情况下如何选择单选按钮？ [复制]答案

【问题标题】：How to select a radio button by default? [duplicate]默认情况下如何选择单选按钮？ [复制]
【发布时间】：2011-08-01 07:56:07
【问题描述】：

我有一些单选按钮，我希望在加载页面时将其中一个设置为默认选中。我该怎么做？

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

【问题讨论】：

标签： html radio-button

【解决方案1】：

XHTML 解决方案：

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

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

如果您的目标不是 XHTML 一致性，您可以将代码简化为：

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

【讨论】：

重复stackoverflow.com/questions/4711036/…
了解这个问题同样重要：您需要确保此单选按钮组中没有其他输入包含标记checked="false"，也不包含“checked”本身。否则，将检查页面上显示的最后一个。只有您希望默认选择的那个应该有任何包含“选中”的标记。
如果问题依旧，你应该添加属性autocomplete="off"强制浏览器设置默认值。
“空属性”（仍然）在当前HTML 5.2 recommendation中有效。
checked="checked" 还是直接检查哪个更好？

【解决方案2】：

使用选中的属性。

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

或

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

【讨论】：

<input type="radio" name="imgsel" value="" checked="false" /> 也会检查按钮。
我建议只使用checked 或checked="checked" 并且强烈避免使用“true”，因为这意味着“false”会适得其反……它不会't。
第一选择就是正确答案。布尔属性不应有值。
@JasonTu 两者都是正确的。 XHTML 需要第二个版本，而 HTML 允许任何一个版本。
这是否意味着checked="checked" 更好？

【解决方案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

【讨论】：

我很惊讶接受的答案不起作用 - 直到我阅读了您的评论。我也在使用 AngularJS，这是一种享受！
在我的情况下，也使用 angularjs，我有值，但我必须将其更改为 ng-value 才能正常工作。
啊，是的。应该注意的是，这是 angular 1.x not greater 的答案
这个答案应该被删除，因为这个答案没有回答问题。
是的，我正在使用 AngularJS，以前的答案不起作用，我尝试了第二个，它起作用了。

【解决方案4】：

添加此属性：

checked="checked"

【讨论】：

【解决方案5】：

他们几乎做到了...就像一个复选框，您所要做的就是添加属性checked="checked"，如下所示：

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

...你明白了。

干杯！

【讨论】：