How to get the values of checkbox instead of true

Question

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/

" I wanted to show the value DL1/DL2/DL3/DL4/DL5" what is that meaning..can you explain more — Janitha Rasanga
– Janitha Rasanga, Commented Dec 23, 2020 at 13:58
@JanithaRasanga this is the value of each checkbox. I wanted to display the value instead of true. The ask here is: If a user has selected 4 checkboxes then add 4 rows in the record along with the selected checkboxes values. — Kunal Vijan
– Kunal Vijan, Commented Dec 23, 2020 at 14:04
@JanithaRasanga based on the number of checked checkboxes and click on submit, add those many rows — Kunal Vijan
– Kunal Vijan, Commented Dec 23, 2020 at 14:06

netizen · Accepted Answer · 2020-12-23 15:50:40Z

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

answered Dec 23, 2020 at 15:50

netizen

1,0957 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kunal Vijan Over a year ago

I am trying to figure out how to use in the above code. So, on the checkbox, I will add a data-name="DL1" and read the same in function and push?

netizen Over a year ago

Somewhere you have a reference to the input (where you were getting its value property, lets asume el, and el.value, just change el.value to el.dataset.name

D. Seah · Accepted Answer · 2020-12-24 06:49:51Z

0

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>

answered Dec 24, 2020 at 6:49

D. Seah

4,7121 gold badge15 silver badges27 bronze badges

3 Comments

Kunal Vijan Over a year ago

for (let j=1; j<=k; ++j) { this.userObj.assigned_to.push(user); user.dl = "Custom Category"; } right now for all user.dl it's setting text as custom category. i am not getting user.dl.value. can you help me to incorporate the same in typescript function addSubData() stackblitz.com/edit/angular-ivy-d2gbad. @d-seah that would be really helpful

Kunal Vijan Over a year ago

w3schools.com/jsref/tryit.asp?filename=tryjsref_checkbox_order similar to this but in ts

Eliseo Over a year ago

stackoverflow.com/questions/63797930/…

Collectives™ on Stack Overflow

How to get the values of checkbox instead of true

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related