角度2：多个复选框切换

Question

我有5个这样的复选框

<input type="checkbox" [checked]="chk1" (change)="chk1 = !chk1" />chk1 &nbsp;
<input type="checkbox" [checked]="chk2" (change)="chk2 = !chk2" />chk2 &nbsp;
<input type="checkbox" [checked]="chk3" (change)="chk3 = !chk3" />chk3 &nbsp;
<input type="checkbox" [checked]="chk4" (change)="chk4 = !chk4" />chk4 &nbsp;
<input type="checkbox" [checked]="chk5" (change)="chk5 = !chk5" />chk5 &nbsp;

我正在尝试切换复选框。 条件是-

如果选择了第一个复选框，则所有其他四个复选框均应取消选中，反之亦然（即使仅选择了第二个和第三个复选框）

第三和第四复选框必须相互切换。

如何在Angular中实现这一目标？

柱塞链接

Answer 1

要解决该问题，您可以创建复选框列表：

checkboxes = [
    { 
      id: 'cb1',
      name: 'Special (not combinable)',
      value: false
    },
    {
      id: 'cb2', 
      name: 'Example'
      value: true
    },
    {
      id: 'cb3', 
      name: 'Another one'
      value: false
    },
    {
      id: 'cb4', 
      name: 'Toggle 1'
      value: false
    },
      {
      id: 'cb5', 
      name: 'Toggle 2'
      value: false
    }
  ]

然后，您可以在模板中遍历此列表：

<div *ngFor="let cb of checkboxes">
        <input 
          type="checkbox"
          [checked]="cb.value"
          (change)="onCheck(cb)"
          />
        <span [innerHtml]="cb.name"></span>
     </div>

整个检查/取消检查逻辑可以包含在onCheck方法中：

onCheck(selected) {

    let id = selected.id;
    let newValue = !selected.value;

    switch(id) {
      case 'cb1':
        if (newValue) {
          this.checkboxes = this.checkboxes.map(cb => {
            if (cb.id === id) {
              // set new value
              cb.value = newValue
            } else {
              if (newValue) {
                // uncheck checkbox 1-4 if checkbox 1 is checked
                cb.value = false;
              }
            }
            return cb;
          })
        }
        break;

        case 'cb2':
        case 'cb3':
        case 'cb4':
        case 'cb5':
          this.checkboxes = this.checkboxes.map(cb => {
            // uncheck checkbox 1
            if (newValue && cb.id === 'cb1') {
                cb.value = false;
            }

            // set new value
            if(cb.id === id) {
              cb.value = newValue;
            }

            // toggle checkbox 4 / checkbox 5
            if (['cb4', 'cb5'].indexOf(id) > -1 && ['cb4', 'cb5'].indexOf(cb.id) > -1 && cb.id !== id) {
              cb.value = !newValue;
            }

            return cb;
          })
          break;
    }

  }

我希望这有助于解决您的问题。 一个完整的工作示例在这里