在 *ngFor 循环中仅选中一个复选框（单选按钮行为）答案

【问题标题】：Check only one checkbox (radio buttons behavior) within an *ngFor loop在 *ngFor 循环中仅选中一个复选框（单选按钮行为）
【发布时间】：2016-10-18 16:37:35
【问题描述】：

我有一个在Angular2 开发的测验模块，所以只有一些带有建议答案的问题，你必须检查只有一个答案，我知道单选按钮可以处理这种情况，但我想要它是带有单选按钮行为的复选框，问题是我完成了部分工作，但由于它在 *ngFor 循环中更复杂，一旦我检查 B 问题答案，A 问题检查答案将被取消选中并且很快。这是我的 HTML：

<div *ngFor="#qt of listQuestion"><h3 class="uk-accordion-title" >{{qt.wordingQ}}</h3>

           <div class="uk-accordion-content">

    <input type="checkbox" class="cb"  id="0" [(ngModel)]="qt.chp[0]" onchange="cbChange(this)" />

    <label for="0" class="inline-label" > <b>{{qt.lpo[0]}}</b></label><br><br>

    <input type="checkbox" class="cb"   id="1" [(ngModel)]="qt.chp[1]" onchange="cbChange(this)" />

    <label for="1" class="inline-label"><b>{{qt.lpo[1]}}</b></label><br><br>

    <input type="checkbox" class="cb"   id="2" [(ngModel)]="qt.chp[2]" onchange="cbChange(this)"/>

    <label for="2" class="inline-label"> <b>{{qt.lpo[2]}}</b></label><br><br>

    <input type="checkbox" class="cb"  id="3" [(ngModel)]="qt.chp[3]" onchange="cbChange(this)"/>

    <label for="3" class="inline-label"><b>{{qt.lpo[3]}}</b></label>

                               </div></div>

这是制作单独检查方式的脚本：

<script>
  function cbChange(obj) {
    var cbs = document.getElementsByClassName("cb");
    for (var i = 0; i < cbs.length; i++) {
      cbs[i].checked = false;
    }
    obj.checked = true;
  }
</script>

如您所见，这是一个 *ngFor 循环来加载问题列表；每个问题都有一个命题列表（lpo[i]），[(ngModel)]="qt.chp[i]" 用于获取每个命题的状态（检查命题），我想我必须将每个 onchange 函数引用到每个唯一的 ngModel（因为它正在索引中）但我不知道如何。有什么帮助吗？（这里是真实情况的图片）

【问题讨论】：

看看这个：Can you style an html radio button to look like a checkbox?.
看问题的措辞，似乎你没有明白这一点，我不想要任何样式的东西，我的复选框和单选按钮一样工作顺利，问题是一旦我检查了一个在第二个问题中回答，第一个问题中的选中答案将被取消选中，该行为应该是每个问题.. 明白了吗？

标签： javascript html loops checkbox angular

【解决方案1】：

在您的情况下，因为每个问题应该只选择一个答案，我建议您不要在答案级别使用布尔字段来指示选择。相反，您应该将所选答案存储在问题级别。像这样的：

class Question {
    wording: string;
    answers: string[];

    selectedAnswer: string;

    selectAnswer(ans: string) {
        this.selectedAnswer = ans;
    }
}

将来，您可以轻松更改 selectedAnswer 属性和 selectAnswer 函数实现，以便在需要时满足多个选择。然后需要稍微修改问题模板以适应更改：

<div *ngFor="let question of questions">
  <p>{{question.wording}}</p>
  <div *ngFor="let answer of question.answers; let aIndex = index">
    <input type="checkbox" class="cb" id="{{aIndex}}" [ngModel]="answer === question.selectedAnswer" (ngModelChange)="question.selectAnswer(answer)" />
    <label for="{{aIndex}}" class="inline-label" > <b>{{answer}}</b></label><br><br>
  </div>
</div>

这是可运行的 plunker： http://plnkr.co/edit/xMTtFp31rU2ZqCtV8JO1?p=preview

【讨论】：