New Twiddle

components.my-checkbox\.js

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

export default class extends Component {
  @tracked _state = false;

  // get externalState (){
  //   return this.args.isCheckboxSelected(this.args.checkcboxOwnerId, this.args.selectedCheckboxes)
  // }

 	get isCheckboxSelected() {
    // return this.args.checkboxes.find((item) => item.id == this.args.checkbox.checkboxOwnerId);
    return '';
  };

	get selectedCheckboxes() {
  	// return this.args.checkboxes.filter((item) => item.state == true);
    return '';
  };

	get selectedDetails() {
  	// return this.selectedCheckboxes.map((item) => item.checkboxOwnerId);
    return '';
  };
}

components.parent-component\.js

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class extends Component {  
  get selectedIds(){
    console.log('selectedIds : checkboxes =>', this.checkboxes);
  	// return this.checkboxes.map((item) => item.state);
    return this.checkboxes.filter((item) => item.state == true);
    // return 'ye'
  };
  
  constructor() {
    super(...arguments);
    this.parentCheckbox = {
      checkboxOwnerId: 0,
      name: "Parent checkbox",
      state: false
    };
    this.checkboxes = [
      {
        checkboxOwnerId: 1,
        name: "Child checkbox 1",
        state: false
    	},
      {
        checkboxOwnerId: 2,
        name: "Child checkbox 2",
        state: false
    	},
      {
        checkboxOwnerId: 3,
        name: "Child checkbox 3",
        state: false
    	}
    ];
    console.log('INIT', this.checkboxes);
  }
  
  @tracked parentCheckbox;
	@tracked checkboxes;
  
  @action
  onClickParentCheckbox(checkboxOwnerId, state){
  	console.log('Parent : state =>', state);
    console.log('Parent : checkboxes =>', this.checkboxes);
    // if(state == true) {
    //   console.log('yolo');
    //   this.checkboxes.forEach((item) => this.checkboxes[item.key]['state'] = true)
    // } else {
    // 	this.checkboxes.forEach((item) => this.checkboxes[item.key]['state'] = false)
    // }
  };
  
  @action
  onClickChildCheckbox(checkboxOwnerId, state){
  	console.log('Child : checkboxes before =>', this.checkboxes);
  	console.log('Child : checkboxOwnerId =>', checkboxOwnerId);
    
    const checkbox = this.checkboxes.find((item) => item.checkboxOwnerId == checkboxOwnerId)
    checkbox['state'] = !state;
    this.checkboxes[]
    console.log('Child : checkboxes after =>', this.checkboxes.find((item) => item.checkboxOwnerId == checkboxOwnerId)['state']);
  };
}

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
}

templates.application\.hbs

<h1>Welcome to {{this.appName}}</h1>
<br>
<br>
<ParentComponent/>
<br>
<br>

templates.components.my-checkbox\.hbs

<Input
  @type="checkbox"
  @checked={{this._state}}
  {{on "click" (fn @onClick @checkbox.checkboxOwnerId this._state)}} />

<label>
	{{@checkbox.name}}
  
  ({{this.selectedDetails}})
  
  {{#if this.isCheckboxSelected}}
  	(state - {{this.isCheckboxSelected}})
  {{/if}}
</label>

templates.components.parent-component\.hbs

<MyCheckbox
	@checkbox={{this.parentCheckbox}}
  @onClick={{this.onClickParentCheckbox}}
  @checkboxes={{this.checkboxes}}
/>
<br>

{{#each this.checkboxes as |checkbox|}}
	<div style="margin-left:10px">
  	<MyCheckbox
    	@checkbox={{checkbox}}
      @onClick={{this.onClickChildCheckbox}}
      @checkboxes={{this.checkboxes}}
    />
  </div>
{{/each}}


<div style="margin-top:50px">
	RECAP on parent component => selected ({{	this.selectedIds}})
</div>

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