Html 为选中的单选按钮分配初始值
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/4711036/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Assign an initial value to radio button as checked
提问by Rinkal Bhanderi
How do I assign the value of a radio button initially as checked in HTML?
如何在 HTML 中最初选中单选按钮的值?
回答by polarblau
You can use the checked
attribute for this:
您可以checked
为此使用该属性:
<input type="radio" checked="checked">
回答by seedg
You can just use:
你可以只使用:
<input type="radio" checked />
Using just the attribute checked without stating a value is the same as checked="checked"
.
仅使用检查的属性而不说明值与checked="checked"
.
回答by discodane
I've put this answer on a similar question that was marked as a duplicate of this question. The answer has helped a decent amount of people so I thought I'd add it here too in just in case.
我把这个答案放在一个类似的问题上,这个问题被标记为这个问题的重复。答案已经帮助了相当多的人,所以我想我也会在这里添加它以防万一。
This doesn't exactly answer the question but for anyone using AngularJS trying to achieve this, the answer is slightly different. And actually the normal answer won't work (at least it didn't for me).
这并不能完全回答这个问题,但对于任何使用 AngularJS 试图实现这一目标的人来说,答案略有不同。事实上,正常的答案是行不通的(至少对我来说不是)。
Your html will look pretty similar to the normal radio button:
您的 html 看起来与普通单选按钮非常相似:
<input type='radio' name='group' ng-model='mValue' value='first' />First
<input type='radio' name='group' ng-model='mValue' value='second' /> Second
In your controller you'll have declared the mValue
that is associated with the radio buttons. To have one of these radio buttons preselected, assign the $scope
variable associated with the group to the desired input's value:
在您的控制器中,您将声明mValue
与单选按钮关联的 。要预先选择这些单选按钮之一,请将$scope
与组关联的变量分配给所需的输入值:
$scope.mValue="second"
This makes the "second" radio button selected on loading the page.
这使得在加载页面时选择“第二个”单选按钮。
回答by msanford
For anyone looking for an Angular2 (2.4.8) solution, since this is a generically-popular question when searching:
对于寻找 Angular2 (2.4.8) 解决方案的任何人,因为这是搜索时普遍流行的问题:
<div *ngFor="let choice of choices">
<input type="radio" [checked]="choice == defaultChoice">
</div>
This will add the checked
attribute to the input given the condition, but will add nothing if the condition fails.
这会将checked
属性添加到给定条件的输入中,但如果条件失败则不会添加任何内容。
Do notdo this:
不要这样做:
[attr.checked]="choice == defaultChoice"
because this will add the attribute checked="false"
to every other input element.
因为这会将属性添加checked="false"
到每个其他输入元素。
Since the browser only looks for the presence of the checked
attribute (the key), ignoring its value, so the last input in the group will be checked.
由于浏览器只查找checked
属性(键)是否存在,忽略其值,因此将检查组中的最后一个输入。
回答by YZ Zhe
Note that if you have two radio button with same "name" attribute and they have "required" attribute, then adding "checked" attribute to them won't make them checked.
请注意,如果您有两个具有相同“name”属性的单选按钮并且它们具有“required”属性,则向它们添加“checked”属性不会使它们被选中。
Example: This makes both radio button remain unchecked.
示例:这使两个单选按钮保持未选中状态。
<input type="radio" name="gender" value="male" required <?php echo "checked"; ?>/>
<input type="radio" name="gender" value="female" required />
This will makes the "male" radio button checked.
这将使“男性”单选按钮被选中。
<input type="radio" name="gender" value="male" <?php echo "checked"; ?>/>
<input type="radio" name="gender" value="female" />
回答by Deepika Pethaperumal
The other way to set default checked on radio buttons, especially if you're using angularjs is setting the 'ng-checked' flag to "true"
eg: <input id="d_man" value="M" ng-disabled="some Value" type="radio" ng-checked="true">
Man
在单选按钮上设置默认选中的另一种方法,特别是如果您使用 angularjs 是将 'ng-checked' 标志设置为“true”,例如:<input id="d_man" value="M" ng-disabled="some Value" type="radio" ng-checked="true">
Man
the checked="checked" did not work for me..
已检查=“已检查”对我不起作用..
回答by user2903379
Im a bit late to the party and I know the OP said html, but if you needed to do this in MVC you can set true
in the third param.
我参加聚会有点晚了,我知道 OP 说的是 html,但是如果您需要在 MVC 中执行此操作,则可以true
在第三个参数中进行设置。
eg:
例如:
<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
回答by Ruks
If you are using react-redux for your application and if you want to show data which is in the redux store, you can set "checked" option as below.
如果您正在为您的应用程序使用 react-redux,并且如果您想显示 redux 存储中的数据,您可以设置“已检查”选项,如下所示。
<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"}
/>