How to get the values of checkbox instead of 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

<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

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();
});
}

Output

Live: https://angular-ivy-ysaulb.stackblitz.io/

回答1:

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:

Use element.id.toUpperCase()
Use Data attributes

回答2:

will this small example help?

const test = () => {
    const selected = [...document.querySelectorAll('input[type="checkbox"]:checked')].map(cb => {
    return cb.value;
    });
  console.log(selected);
}

<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>
<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>
<button onclick="test()">Test</button>

来源：https://stackoverflow.com/questions/65423577/how-to-get-the-values-of-checkbox-instead-of-true

标签

javascript

arrays

json

angular

typescript