如何根据条件检查单选按钮？答案

【问题标题】：how to make radio button checked on condition based?如何根据条件检查单选按钮？
【发布时间】：2016-12-14 20:29:44
【问题描述】：

我想根据条件检查单选按钮。就像index=>4 一样，应该选中按钮 4。我的 HTML 代码是这样的：

<input id="rating5" type="radio" name="rating" value="5">
<label for="rating5">5</label>
<input id="rating4" type="radio" name="rating" value="4">
<label for="rating4">4</label>
<input id="rating3" type="radio" name="rating" value="3">
<label for="rating3">3</label>
<input id="rating2" type="radio" name="rating" value="2" >
<label for="rating2">2</label>
<input id="rating1" type="radio" name="rating" value="1">
<label for="rating1">1</label>

【问题讨论】：

index的值在哪里定义的？

标签： angular radio-button

【解决方案1】：

不知道index 来自哪里，但假设它是服务器端，你可以像这样在输入标签内放置一个PHP if 语句。

 <input id="rating4" <?php if ($index >=4){echo 'checked="checked"';} ?>
 type="radio" name="rating" value="4">

【讨论】：

【解决方案2】：

我的一个项目中有这样的事情。技巧是将选中的属性绑定到布尔表达式。

HTML

<input id="rating4" type="radio" name="Rating" [checked]="index == 4" (click)="index = 4">
<label for="rating4">4</lable>

@Component({
   .
   .
   .
 })
export class MyClass {
  index: number;

  constructor() {
     this.index = 4; 
  }

}

基本上，如果索引等于匹配的值，将检查单选按钮，然后单击该单选按钮会在组件中更新它。在此示例中，我们也将选定按钮默认为 4，但如果您不想选择任何内容，则可以将其默认为 -1。

【讨论】：