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;

我试图切换复选框。条件是 -

如果选中第一个复选框，则应取消选中所有其他4个复选框，反之亦然（即使只选择了第2个和第3个框）

第3个和第4个复选框必须相互切换。

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

Plunker link

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;
    }

  }

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

Angular 2：多个复选框切换

1 个答案: