如何获取复选框的值而不是true

问题描述

我想打印选定复选框的值，而不是自定义类别".我尝试获取值，属性，但未获取值.

I wanted to print the values of selected checkboxes instead of "Custom Category". I have tried to get value, attribute but not getting the values.

我想打印所选复选框的值.

I wanted to print the values of the selected checkbox.

app.component.html

app.component.html

<form #myForm="ngForm">
<div class="form-group">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="dl1" required #dl="ngModel" value="DL1" ngModel name="dl">
<label class="form-check-label" for="">DL 1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="dl2" required #dl="ngModel" value="DL2" ngModel name="dl">
<label class="form-check-label" for="">DL 2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="dl3" required #dl="ngModel" value="DL3" ngModel name="dl">
<label class="form-check-label" for="">DL 3</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="dl4" required #dl="ngModel" value="DL4" ngModel name="dl">
<label class="form-check-label" for="">DL 4</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="dl5" required #dl="ngModel" value="DL5" ngModel name="dl">
<label class="form-check-label" for="">DL 5</label>
</div>
<div *ngIf="dl.invalid" class="error">Please select atleast one DL.</div>
</div>
<div class="form-group">
<label>Comments</label>
<textarea name="comments" #comments="ngModel" required class="form-control" ngModel id="" cols="5" rows="5"></textarea>
<span *ngIf="comments.invalid && comments.touched" class="error">Please provide your comments.</span>
</div>
<div class="form-group">
<button type="submit" [disabled]="myForm.invalid" class="btn btn-primary btn-sm" (click)="addSubData(myForm.value)">Submit</button>
<button type="button" class="btn btn-secondary btn-sm ml-2" (click)="cancelAddUser()">Cancel</button>
</div>
</form>

app.component.ts

app.component.ts

addSubData(user: any) {
let newData = this.userObj.assigned_to;
let i: any;
i = document.querySelectorAll('input[type="checkbox"]:checked').length;
for (let j=1; j<=i; ++j) {
newData.push(user);
user.dl = "Custom Category";
console.log(user.dl);
}
user.sub_impact = "Applicable";
user.co_score = "Added";
this.commonService.updateUser(this.userObj).subscribe(()=> {
this.getLatestUser();
});
}

输出

实时: https://angular-ivy-ysaulb.stackblitz.io/

推荐答案

根据规范，输入类型="checkbox"有两个值(真/假).它甚至警告有关预设的值".您可以通过两种方式获得所需的东西:

According to specs, an input type="checkbox" has two values (true/false). It even warns about preset "values".You've two ways to get what you ask for:

1. 使用element.id.toUpperCase()
2. 使用数据属性

这篇关于如何获取复选框的值而不是true的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！