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

Question

我想根据条件检查单选按钮。就像

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>

Answer 1

不知道

index

来自哪里，但假设它是服务器端，您可以将 PHP if 语句放在输入标记内，如下所示。

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

Answer 2

我的一个项目中有类似的东西。技巧是将选中的属性绑定到布尔表达式。

HTML

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

JS

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

  constructor() {
     this.index = 4; 
  }

}

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

Answer 3

下面的代码对我来说工作得很好。地址是从地图功能提供的 -

<input
     id="address-radio-button"
     value={address.address}
     name="platform"
     type="radio"
     checked={address.isDefault ? true : false}
     onChange={() => changeShippingAddress(address, index)}
/>