如何默认选择一个单选按钮?

jsl*_*ner 678 html radio-button

我有一些单选按钮,我希望在加载页面时默认将其中一个设置为选中状态.我怎样才能做到这一点?

<input type="radio" name="imgsel"  value=""  /> 
Run Code Online (Sandbox Code Playgroud)

Sha*_*ngh 1074

XHTML解决方案:

<input type="radio" name="imgsel" value="" checked="checked" />
Run Code Online (Sandbox Code Playgroud)

请注意,checked属性的实际值实际上并不重要; 这只是一个分配的惯例"checked".最重要的是,字符串喜欢"true""false"没有任何特殊含义.

如果您不瞄准XHTML一致性,则可以将代码简化为:

<input type="radio" name="imgsel" value="" checked>
Run Code Online (Sandbox Code Playgroud)

  • 知道这个问题同样重要:您需要确保此单选按钮组中没有其他输入包含markup checked ="false",也不需要"自检".否则,将检查页面上显示的最后一个.默认情况下,只有您想要选择的那个应该包含任何包含"已选中"的标记. (91认同)
  • http://stackoverflow.com/questions/4711036/assign-an-initial-value-to-radio-button-as-checked 的重复 (2认同)
  • 如果问题仍然存在,则应添加属性** autocomplete =“ off” **以强制浏览器设置默认值。 (2认同)
  • “空属性”(仍)在当前[HTML 5.2建议](https://www.w3.org/TR/2017/REC-html52-20171214/syntax.html#elements-attributes)中有效。 (2认同)

mdm*_*mdm 103

使用checked属性.

<input type="radio" name="imgsel"  value="" checked /> 
Run Code Online (Sandbox Code Playgroud)

要么

<input type="radio" name="imgsel"  value="" checked="checked" /> 
Run Code Online (Sandbox Code Playgroud)

  • 我建议只使用`checked`或`checked ='checked"`和**强烈**避免使用"true",因为它暗示"false"会做相反的事情......但事实并非如此. (35认同)
  • `<input type ="radio"name ="imgsel"value =""checked ="false"/>`也会导致按钮被检查. (15认同)
  • @JasonTu两者都是正确的.XHTML需要第二个版本,而HTML允许. (4认同)
  • 第一个选择是正确的答案.布尔属性不应包含值. (3认同)
  • 这是否意味着检查=“检查”更好? (2认同)
  • 不,只是它更加向后兼容。但无论如何,XHTML 已经死了...... (2认同)

dis*_*ane 75

这并没有完全回答这个问题,但对于任何使用AngularJS试图实现这一目标的人来说,答案略有不同.实际上,正常的答案是行不通的(至少它不适合我).

你的html看起来非常类似于普通的单选按钮:

<input type='radio' name='group' ng-model='mValue' value='first' />First
<input type='radio' name='group' ng-model='mValue' value='second' /> Second
Run Code Online (Sandbox Code Playgroud)

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

$scope.mValue="second"
Run Code Online (Sandbox Code Playgroud)

这使得在加载页面时选择"第二"单选按钮.

编辑:自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
Run Code Online (Sandbox Code Playgroud)

  • 我很惊讶接受的答案不起作用 - 直到我看到你的评论.我也在使用AngularJS,这是一种享受! (5认同)

Ger*_*obs 28

添加此属性:

checked="checked"
Run Code Online (Sandbox Code Playgroud)


Roh*_*jay 18

他们几乎把它拿到那里......就像一个复选框,你所要做的就是添加属性checked ="checked",如下所示:

<input type="radio" checked="checked">
Run Code Online (Sandbox Code Playgroud)

......你明白了

干杯!