Javascript 如何显示每个复选框值而不是所选位置值

首先，很抱歉问题语言混乱，我将尽可能多地解释。这是对我先前的问题的补充

我想添加/显示选中复选框的值。我能够部分实现它，但当前的问题是，如果我选中一个复选框，它会显示第一个值，在两个复选框中，它会显示第二个值2次，而不是第一个n第二个，在三个复选框中，它会显示第三个值3次，而不是第一个、第二个、第三个

您可以在此处查看：单击每一行以查看表单

代码：

---

请更新您的

addSubData

函数，如下所示-

addSubData(user: any) {
    let i: any;
    i = document.querySelectorAll('input[type="checkbox"]:checked');
    for(var checked of i) {
      const newUser = Object.assign({}, user)
      newUser.dl = checked.value;
      newUser.sub_impact = "Applicable";
      newUser.co_score = "Added";
      this.userObj.assigned_to.push(newUser);
    }  
  }

问题是您正在将值分配给同一个用户对象。所以它也在更新数组中的值。您需要使用

object.assign

克隆用户对象

另外，您正在按索引遍历数组以获取值，但是索引

k-1

在for循环中将始终返回相同的值，因为它们在for循环中是常量。我已经更新了代码，所以它会从复选框中选择

---

除此之外，还有一个小问题，我想一旦你解决了这个问题，你就会得到它。

你的代码有点混乱。我真的无法想象你会这么做，但是

首先。当我们有一个输入时，在角度中我们使用

[（ngModel）]=“variable”

。这使得在.ts中有变量的值，在.html中显示变量的值

那么，在.ts中定义四个变量

gender:string
impact:string
fromDate:any
toDate:any

你申请的“表格”必须是

Gender:<select [(ngModel)]="gender">
   ...
</select>
Impact:<select [(ngModel)]="impact">
   ...
</select>
<input type="date" [(ngModel)]="fromDate">
<input type="date" [(ngModel)]="toDate">
          class="form-control form-control-sm"
          name="gender"
          ngModel
          [ngModelOptions]="{updateOn: 'submit'}"
        >

和使用

<ul *ngFor="let list of dlCategory">
    <div class="form-check form-check-inline">
        <input type="checkbox" [(ngModel)]="categories[i] 
              name="{{list.name}}">
        <label class="form-check-label" for="">{{list.label}}</label>
     </div>
 </ul>

=0" 
（ngModelChange）=“onChange（list.name，check.checked）”
name=“{list.name}}”>
{{list.label}

一旦改变就会变成这样

  onChange(option:string,checked:boolean)
  {
     if (checked && this.user.categories.indexOf(option)<0)
         this.user.categories=[...this.user.categories,option]
         .sort((a,b)=>this.dlCategory.findIndex(x.name==a)>this.dlCategory.findIndex(x.name==b)?1:-1)
    if (!checked)
          this.user.categories=this.user.categories.filter(x=>x!=option)
  }

onChange（选项：字符串，选中：布尔值）
{
如果（选中此选项）this.dlCategory.findIndex（x.name==a）>this.dlCategory.findIndex（x.name==b）&&this.user.categories.indexOf（选项）1:-1）
如果（！选中）
this.user.categories=this.user.categories.filter（x=>x！=选项）
}

最后，当我们想要显示类别的数据时，我们可以迭代dlCategory并仅在cat位于user.categories中时显示

<div *ngFor="cat of dlCategories;let i=index>
  <ng-container *ngIf="user.categories.indexOf(cat.name)>=0">
     {{cat.name}}{{cat.value}}
  <ng-container>
</div>

=0”>
{{cat.name}{{cat.value}

---

注意：我很赶时间，可能代码有语法错误，但我希望答案能对您有所帮助

谢谢@nikhil patil您能帮我解决您正在谈论的小问题吗？也许我能在测试人员提出之前更快地解决它。请重新考虑一种更“有角度的方式”。使用querySelectorAll（..）进行检查不是一个好方法aproach@KunalVijan，我指的是诸如-

addSubData

之类的问题，如果重复调用，它将无法清除前面的附加列表。我不确定你是否想清除它？@Eliseo，你是对的。最好直接从HTML绑定值，而不是通过DOM。因为有很多代码需要处理，所以我刚刚解决了手头的问题。@KunalVijan，请检查一下-

  onChange(option:string,checked:boolean)
  {
     if (checked && this.user.categories.indexOf(option)<0)
         this.user.categories=[...this.user.categories,option]
         .sort((a,b)=>this.dlCategory.findIndex(x.name==a)>this.dlCategory.findIndex(x.name==b)?1:-1)
    if (!checked)
          this.user.categories=this.user.categories.filter(x=>x!=option)
  }

<div *ngFor="cat of dlCategories;let i=index>
  <ng-container *ngIf="user.categories.indexOf(cat.name)>=0">
     {{cat.name}}{{cat.value}}
  <ng-container>
</div>