multiselect checkbox

1var expanded = false;
2
3function showCheckboxes() {
4  var checkboxes = document.getElementById("checkboxes");
5  if (!expanded) {
6    checkboxes.style.display = "block";
7    expanded = true;
8  } else {
9    checkboxes.style.display = "none";
10    expanded = false;
11  }
12}

1onChange(index_val) {
2    this.zoneModel = []
3    if (index_val == 0 && this.zonesList[0].checked == true) {
4      for (let i = 1; i < this.zonesList.length; i++) {
5        this.zoneModel.push(this.zonesList[i].houzeyZoneName)
6        this.zonesList[i].checked = true;
7        this.zoneFlag = true;
8      }
9    } else if (index_val == 0 && this.zonesList[0].checked == false) {
10      for (let i = 1; i < this.zonesList.length; i++) {
11        this.zonesList[i].checked = false;
12        this.zoneFlag = false;//testing
13      }
14
15    } else if (index_val > 0) {
16
17      for (let i = 1; i < this.zonesList.length; i++) {
18        if (this.zonesList[i].checked == true) {
19          this.zonesList[i].checked = true;
20          this.zoneFlag = true;
21          this.zoneModel.push(this.zonesList[i].houzeyZoneName)
22          if (this.zoneModel.length == this.zonesList.length - 1) {
23            this.zonesList[0].checked = true;
24          }
25        } else {
26          //this.zoneFlag = false;//testing
27          this.zonesList[i].checked = false;
28          if (this.zonesList[0].checked == true) {
29            this.zonesList[0].checked = false;
30          }
31
32        }
33      }
34    }
35
36
37
38  }