Angular 2: Multiple Checkbox umschalten

Question

Ich habe 5 Kontrollkästchen auf diese Weise

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

Ich versuche, Kontrollkästchen zu wechseln. Bedingungen sind-

Wenn das erste Kontrollkästchen aktiviert ist, werden alle anderen 4 Kontrollkästchen ist nicht markiert und umgekehrt (wenn auch nur 2. und 3. Kästchen aktiviert sind)

3. und 4. Kontrollkästchen Toggle zueinander sein müssen .

Wie erreiche ich das in Angular?

Plunker link

Answer 1

Um das Problem zu lösen, können Sie eine Liste von Kontrollkästchen erstellen:

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

in Vorlage Dann können Sie über diese Liste iterieren:

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

Die ganze aktivieren/deaktivieren Logik könnte in einer onCheck-Methode enthalten sein:

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

    } 

Ich hoffe, dass dies hilft, Ihr Problem zu lösen. Ein voll funktionierendes Beispiel ist here