@Tracked Nested Checkboxes

components.checkbox\.js

import Component from '@glimmer/component';
import { schedule } from '@ember/runloop';
import { action } from '@ember/object';
import { tracked } from 'tracked-built-ins';
import { cached, trackedReset } from 'tracked-toolbox';

export default class extends Component {
	@trackedReset('args.checked') children = tracked([]);

  constructor() {
    super(...arguments);
    
    this.args.registerChild?.(this);
  }

  @action
  registerChild(child) {
    schedule('actions', () => this.children.push(child)); 
  }
 
  @cached
  get isIndeterminate() {
    return this.children.some(child => child.args.checked); 
  }

  @action
  setChecked(checked) {
    if (this.isIndeterminate) {
      for (let child of this.children) {
        child.setChecked(false);
      }
    } else {
      this.args.onChange?.(checked); 
    }
  }
}

components.wrapper\.js

import Component from '@glimmer/component';
import { action, set } from '@ember/object';

export default class extends Component {
	searchChecked = true;
  jobChecked = false;
	campaignChecked = true;
	openJobChecked = false;
	closedJobChecked = false;
}

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = '@tracked Nested Checkboxes';
}

modifiers.set-indeterminate\.js

import { modifier } from 'ember-modifier';

export default modifier((element, [isIndeterminate, checked]) => {
  element.indeterminate = isIndeterminate;
  
  if (!isIndeterminate && checked) {
    element.checked = true; 
  }
});

templates.application\.hbs

<h1>{{this.appName}}</h1>
<br>
<br>
<Wrapper />
<br>
<br>
{{outlet}}
<br>
<br>

templates.components.checkbox\.hbs

<li>
  <input
  	class="checkbox-item"
    id={{@name}}
    type="checkbox"
    checked={{@checked}}
    {{on 'change' (fn this.setChecked (not @checked))}}
    name={{@name}}
    {{set-indeterminate this.isIndeterminate @checked}}
  >
	<label for={{@name}}>{{@label}}</label>

	{{#if (or @checked this.isIndeterminate)}}
    {{yield (component 'checkbox' registerChild=this.registerChild)}}
  {{/if}}
</li>

templates.components.wrapper\.hbs

<ol>
	<Checkbox
  	@checked={{this.searchChecked}}
    @onChange={{fn (mut this.searchChecked)}}
    @label="Search"
    @name="search"
  />
  <Checkbox
  	@checked={{this.jobChecked}}
    @onChange={{fn (mut this.jobChecked)}}
    @label="Job Posting"
    @name="job"
    as |JobCheckbox|
  >
    <ol>
  	  <h4>Filter Job Status</h4>

			<JobCheckbox
        @checked={{this.openJobChecked}}
        @onChange={{fn (mut this.openJobChecked)}}
        @label="Open"
        @name="openJob"
      />
      <JobCheckbox
        @checked={{this.closedJobChecked}}
        @onChange={{fn (mut this.closedJobChecked)}}
        @label="Closed"
        @name="closedJob"
      />
    </ol>

  </Checkbox>

  <Checkbox
  	@checked={{this.campaignChecked}}
    @onChange={{fn (mut this.campaignChecked)}}
    @label="Campaign"
    @name="campaign"
  />
</ol>

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-modifier": "1.0.3",
    "ember-truth-helpers": "2.1.0",
    "tracked-built-ins": "1.0.0",
    "tracked-toolbox": "1.2.0"
  }
}