为选中的单选按钮分配初始值

Posted 2023-03-05

【中文标题】为选中的单选按钮分配初始值

【英文标题】：Assign an initial value to radio button as checked

【发布时间】：2011-06-10 07:24:51

【问题描述】：

如何分配最初在 html 中选中的单选按钮的值？

【参考方案1】：

如果您的应用程序使用 react-redux，并且想要显示 redux 存储中的数据，您可以设置“checked”选项，如下所示。

<label>Male</label>

 <input
   type="radio"
   name="gender"
   defaultChecked=this.props.gender == "0"
 />



 <label>Female</label>
 <input
   type="radio"
   name="gender"
   defaultChecked=this.props.gender == "1"
 />

【参考方案2】：

我参加聚会有点晚了，我知道 OP 说 html，但如果你需要在 MVC 中执行此操作，你可以在第三个参数中设置 true。

例如：

    <p>Option One :@Html.RadioButton("options", "option1", true)</p>
    // true will set it checked

     <p>Option Two :@Html.RadioButton("options", "option2")</p>
     //nothing will leave it unchecked

【参考方案3】：

请注意，如果您有两个具有相同“name”属性的单选按钮并且它们具有“required”属性，则向它们添加“checked”属性不会使它们被选中。

示例：这会使两个单选按钮保持未选中状态。

<input type="radio" name="gender" value="male" required <?php echo "checked"; ?>/>
<input type="radio" name="gender" value="female" required />

这将使“男性”单选按钮被选中。

<input type="radio" name="gender" value="male" <?php echo "checked"; ?>/>
<input type="radio" name="gender" value="female" />

【参考方案4】：

对于寻找 Angular2 (2.4.8) 解决方案的任何人，因为这是搜索时普遍流行的问题：

<div *ngFor="let choice of choices">
  <input type="radio" [checked]="choice == defaultChoice">
</div>

这会将checked 属性添加到给定条件的输入中，但如果条件失败，则不会添加任何内容。

不要这样做：

[attr.checked]="choice == defaultChoice"

因为这会将属性checked="false" 添加到每个其他输入元素。

由于浏览器只查找checked 属性（键）的存在，而忽略其值，因此将检查组中的最后一个输入。

【参考方案5】：

在单选按钮上设置默认选中的另一种方法，尤其是在使用 angularjs 时，将“ng-checked”标志设置为“true” 例如：<input id="d_man" value="M" ng-disabled="some Value" type="radio" ng-checked="true">Man

checked="checked" 对我不起作用..

【讨论】：

因为 ng-checked="true" 来自 angularjs 曲目。

或者将控制器中的模型值设置为“true”。请注意，您将其设置为字符串，而不是布尔值！

【参考方案6】：

您可以为此使用checked 属性：

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

【讨论】：

您也可以只提及没有分配值的属性，即

@niksvp 我相信checked="checked" 是预先检查单选按钮的有效方法——仅使用"checked" 不是有效的HTML（尽管大多数浏览器都支持）

@matthewh - 不，您可以单独使用“已检查”，它是有效的 HTML（尽管不是有效的 XHTML）。就我个人而言，我更喜欢 'checked="checked"'，但您没有必须使用它......确实，有一个非常强烈的理由反对使用它。跨度>

【参考方案7】：

我已将此答案放在标记为与此问题重复的类似问题上。答案已经帮助了相当多的人，所以我想我也会在这里添加它以防万一。

这并不能完全回答这个问题，但对于任何使用 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"

这会在加载页面时选择“第二个”单选按钮。

【讨论】：

确实！以上答案不适用于 Angular JS。你的回答解决了我的问题。谢谢！ :)

【参考方案8】：

你可以使用：

<input type="radio" checked />

仅使用检查的属性而不说明值与checked="checked" 相同。

【讨论】：

正如@Matt Healey 所说，使用不带属性的检查是无效的HTML

@salvob 不正确。它不是有效的 Xhtml，但它对于 HTML5 是完全有效的，因为它是一个全球性的标准。​​