ion-checkbox doesn't check properly

I think the problem is that changing the "all" option also triggers a change in the other options, which at the same time tries to change the "all" option again. It's not very easy to notice this, but if you add a few console.log('...'); you'll find that the method that updates the state of the options is called a few more times than what you'd expect.

A better way to handle this would be to leave the "all" option outside of the form. The reason behind this is that the "all" option is not really an option, but a side effect based on the state of the other options. And by leaving it outside of the form, we can control when and how it should be updated without having any issues related to the change on an option triggering the change on another option behind the scenes.

Please also notice that as of Ionic 4.1.0 the ion-checkbox component has an indeterminate state that may be useful for scenarios like this one. It's a common UI/UX practice that if you select only some of several options (but not all of them) instead of showing the "all" option as unchecked, it's shown in an indeterminate state.

Anyway, please take a look at this working Stackblitz demo:

Like you can see in the demo, I'm keeping the state of the "all" option outside of the form:

  public form: FormGroup;

  public allOptionStateChecked = false;
  public allOptionStateIndeterminate = false;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.form = this.formBuilder.group({
      option1: false,
      option2: false,
      option3: false
    });
  }

And I'm setting its state manually using those properties (by also using the click handler instead of ionChange):

<ion-item (click)="onAllChange()" lines="none">
  <ion-checkbox 
    slot="start" 
    [checked]="allOptionStateChecked"
    [indeterminate]="allOptionStateIndeterminate">
  </ion-checkbox>
  <ion-label>All</ion-label>
</ion-item>

I also have some helper methods that tell me if all or some of the options are checked:

  private allChecked(): boolean {
    const option1Value = this.form.get("option1").value;
    const option2Value = this.form.get("option2").value;
    const option3Value = this.form.get("option3").value;

    return option1Value && option2Value && option3Value;
  }

  private someChecked(): boolean {
    const option1Value = this.form.get("option1").value;
    const option2Value = this.form.get("option2").value;
    const option3Value = this.form.get("option3").value;

    return !this.allChecked() && (option1Value || option2Value || option3Value);
  }

And with all that in place, there are only two things to be done:

1. Update the "all" option state when any of the other options are changed
2. Update the rest of the options when clicking the "all" option.

  public onAllChange(): void {
    const nextValue = this.allChecked() ? false : true;

    this.form.get("option1").patchValue(nextValue);
    this.form.get("option2").patchValue(nextValue);
    this.form.get("option3").patchValue(nextValue);
  }

  public onOptionChange(): void {
    this.allOptionStateChecked = this.allChecked();
    this.allOptionStateIndeterminate = this.someChecked();
  }

Please notice that I don't update allOptionStateChecked and allOptionStateIndeterminate in the onAllChange() method. Since the state of the "all" option is a side effect based on the state of the other options, its state is updated in the onOptionChange() instead.

EDIT

Based on your comment I've updated the Stackblitz demo to also include the "all" option as part of the form but still, the difference with your code is that I manually set the state of the "all" option instead of binding it to the view using something like formControlName="all":

  ...

  ngOnInit() {
    this.form = this.formBuilder.group({
      all: false, // <-- added this to the form
      option1: false,
      option2: false,
      option3: false
    });
  }

  ...

  public onOptionChange(): void {
    this.allOptionStateChecked = this.allChecked();
    this.allOptionStateIndeterminate = this.someChecked();

    // Added this line at the end of the method!
    this.form.get("all").patchValue(this.allOptionStateChecked);
  }

Use (click) not (ionChange) in HTML. As ionChange is emitted when the checked property has changed so changing checkbox form value also triggers their ionChange which is unnecessary and creating this unexpected behavior.

(ionChange) is actually a good practice.

As a quick solution, I would rebuild the form with each change of your checkboxes.

in .ts :

private AllBulkhead = false;
private ..... [add all your checkbox values here]

constructor(private _fb: FormBuilder){
    this.buildForm();
}

buildForm() {
    this.form = this._fb.group({
          AllBulkhead: this.AllBulkhead,
          longiBulkhead: this.longiBulkhead,
          outerBulkhead: this.outerBulkhead,
          innerBulkhead: this.innerBulkhead,
    });
}

checkboxClickHandler(var, value) {
    // this is called with (ionChange) from html
    // change the value ( this.AllBulkhead = value )
    this.buildForm() // rebuild form with correct values
}

Good luck!