Javascript 根据接收到的数据，使多个复选框的状态处于选中状态

我想根据我检索的数据选中多个复选框，或者换句话说，保持与提交表单时相同的状态， 我有一个表单，表单中有多个复选框，还有一个编辑按钮，它允许我编辑表单，同时可以轻松地检索相同的数据以进行

input[text]

，我不知道如何将复选框的状态更改为Checked，因为我接收的数据是以数组的形式出现的，看起来像

[“m”，“3XL”，“7XL”、“10XL”]

现在，当用户单击编辑按钮提交表单时，我希望选中这些复选框

组件。ts

  checkArrayEBXBR = [];
  checkArrayJEBXO = [];
  checkboxObject = [
    {
      checkboxLabel: "EBXBR",
      checkboxContainer: [
        {
          id: "0",
          label: "S",
          isChecked: false,
        },
        {
          id: "1",
          label: "M",
          isChecked: false,
        },
        {
          id: "2",
          label: "L",
          isChecked: false,
        },
        {
          id: "3",
          label: "XL",
          isChecked: false,
        },
        {
          id: "4",
          label: "2XL",
          isChecked: false,
        },
        {
          id: "5",
          label: "3XL",
          isChecked: false,
        },
        {
          id: "6",
          label: "4XL",
          isChecked: false,
        },
        {
          id: "7",
          label: "5XL",
          isChecked: false,
        },
        {
          id: "8",
          label: "6XL",
          isChecked: false,
        },
        {
          id: "9",
          label: "7XL",
          isChecked: false,
        },
        {
          id: "10",
          label: "8XL",
          isChecked: false,
        },
        {
          id: "11",
          label: "9XL",
          isChecked: false,
        },
        {
          id: "12",
          label: "10XL",
          isChecked: false,
        },
      ],
    },
    {
      checkboxLabel: "JEBXO",
      checkboxContainer: [
        {
          id: "0",
          label: "S",
          isChecked: false,
        },
        {
          id: "1",
          label: "M",
          isChecked: false,
        },
        {
          id: "2",
          label: "L",
          isChecked: false,
        },
        {
          id: "3",
          label: "XL",
          isChecked: false,
        },
        {
          id: "4",
          label: "2XL",
          isChecked: false,
        },
        {
          id: "5",
          label: "3XL",
          isChecked: false,
        },
        {
          id: "6",
          label: "4XL",
          isChecked: false,
        },
        {
          id: "7",
          label: "5XL",
          isChecked: false,
        },
        {
          id: "8",
          label: "6XL",
          isChecked: false,
        },
        {
          id: "9",
          label: "7XL",
          isChecked: false,
        },
        {
          id: "10",
          label: "8XL",
          isChecked: false,
        },
        {
          id: "11",
          label: "9XL",
          isChecked: false,
        },
        {
          id: "12",
          label: "10XL",
          isChecked: false,
        },
      ],
    },
  ];

  changeSelection() {
    this.fetchSelectedItems();
  }
  fetchSelectedItems() {
    this.ebxbrselectedItemsList = this.checkboxObject[0].checkboxContainer.filter(
      (value, index) => {
        return value.isChecked;
      }
    );
    this.checkArrayEBXBR = [];
    this.checkArrayJEBXO = [];
    for (let i = 0; i < this.ebxbrselectedItemsList.length; i++) {
      this.checkArrayEBXBR.push(this.ebxbrselectedItemsList[i].label);
    }
    for (let i = 0; i < this.jebxoselectedItemsList.length; i++) {
      this.checkArrayJEBXO.push(this.jebxoselectedItemsList[i].label);
    }
    console.log(this.checkArrayJEBXO)
    console.log(this.checkArrayEBXBR)
  }

checkArrayEBXBR=[]；
checkArrayJEBXO=[]；
checkboxObject=[
{
复选框标签：“EBXBR”，
checkboxContainer：[
{
id:“0”，
标签：“S”，
检查：错误，
},
{
id:“1”，
标签：“M”，
检查：错误，
},
{
id:“2”，
标签：“L”，
检查：错误，
},
{
id:“3”，
标签：“XL”，
检查：错误，
},
{
id:“4”，
标签：“2XL”，
检查：错误，
},
{
id:“5”，
标签：“3XL”，
检查：错误，
},
{
id:“6”，
标签：“4XL”，
检查：错误，
},
{
id:“7”，
标签：“5XL”，
检查：错误，
},
{
id:“8”，
标签：“6XL”，
检查：错误，
},
{
身份证号码：“9”，
标签：“7XL”，
检查：错误，
},
{
身份证号码：“10”，
标签：“8XL”，
检查：错误，
},
{
id:“11”，
标签：“9XL”，
检查：错误，
},
{
id:“12”，
标签：“10XL”，
检查：错误，
},
],
},
{
复选框标签：“JEBXO”，
checkboxContainer：[
{
id:“0”，
标签：“S”，
检查：错误，
},
{
id:“1”，
标签：“M”，
检查：错误，
},
{
id:“2”，
标签：“L”，
检查：错误，
},
{
id:“3”，
标签：“XL”，
检查：错误，
},
{
id:“4”，
标签：“2XL”，
检查：错误，
},
{
id:“5”，
标签：“3XL”，
检查：错误，
},
{
id:“6”，
标签：“4XL”，
检查：错误，
},
{
id:“7”，
标签：“5XL”，
检查：错误，
},
{
id:“8”，
标签：“6XL”，
检查：错误，
},
{
身份证号码：“9”，
标签：“7XL”，
检查：错误，
},
{
身份证号码：“10”，
标签：“8XL”，
检查：错误，
},
{
id:“11”，
标签：“9XL”，
检查：错误，
},
{
id:“12”，
标签：“10XL”，
检查：错误，
},
],
},
];
变更选择（）{
this.fetchSelectedItems（）；
}
fetchSelectedItems（）{
this.ebxbrselectedItemsList=this.checkboxObject[0]。checkboxContainer.filter(
（值、索引）=>{
返回值。已检查；
}
);
this.checkArrayEBXBR=[]；
this.checkArrayJEBXO=[]；
for（设i=0；i

component.html

<div class="form-group selection-container">
          <h5 class="form-title">SKU</h5>
          <div class="row" *ngFor="let item of checkboxObject; let i = index">
            <div class="col-12">
              <div class="form-group size-code">
                <ion-label class="item-code">{{item.checkboxLabel}}</ion-label>
                <ion-checkbox slot="end" value="pepperoni"></ion-checkbox>
              </div>
            </div>
            <div class="col-12">
              <div class="sizes-container">
                <div class="form-group" *ngFor="let innerItem of checkboxObject[i].checkboxContainer">
                  <ion-label for="{{item.id}}" >{{ innerItem.label }}</ion-label>
                  <ion-checkbox
                    slot="end"
                    [(ngModel)]="innerItem.isChecked"
                    (ionChange)="changeSelection()"
                    name="{{ innerItem.isChecked }}"
                    [value]="innerItem.label"
                    id="{{innerItem.id}}"
                  ></ion-checkbox>
                </div>
              </div>
            </div>
          </div>
        </div>

SKU
{{item.checkboxLabel}
{{innerItem.label}

---

正如您所注意到的，有两组复选框，我为每个复选框创建了一个单独的数组，如果有比为每个复选框创建数组更好的方法，我将非常感激。

如果您希望选中复选框，则

有一个名为

checked

的属性你可以用它来绑定一个值，在你的例子中是这样的：

<ion-checkbox
          slot="end"
          [(ngModel)]="innerItem.isChecked"
          (ionChange)="changeSelection()"
          name="{{ innerItem.isChecked }}"
          [value]="innerItem.label"
          id="{{innerItem.id}}"
          [checked]="innerItem.isChecked" // Add this line. 
></ion-checkbox>

如果该值为true，则该属性将保持复选框处于选中状态