1

I have 5 checkboxes in this way

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

I'm trying to toggle checkboxes. Conditions are-

If the first checkbox is selected, all the other 4 checkboxes shall be unchecked and vice versa(even if only 2nd and 3rd boxes are selected)

3rd and 4th checkboxes must be toggle to each other.

How do I achieve this in Angular?

Plunker link

2
  • 1
    Was your plan to try something beyond what you have in the Plunk? If you want to achieve something, you need to start by at least trying something. SO is not a coding service! Commented May 27, 2017 at 12:41
  • @R.Richards I have tried and the fact is I'd forgot to save the plunker after my last changes Commented May 27, 2017 at 15:37

1 Answer 1

3

To solve the problem you could create a list of checkboxes:

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

Then in template you can iterate over this list:

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

The whole check/uncheck logic could be contained in an onCheck method:

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

  }

I hope this helps to solve your problem. A full working example is here

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.