How to use 'lightning-checkbox-group' in for:each loop?

Question

Currently, my requirement is that I want a checkbox in front of names.You can see below screenshot.

So I used lightning-checkbox-group in iteration but it does not work.

Here is the Playground Link for your reference

Here is the code i used -

HTML :-

<template>
<lightning-card title="HelloForEach" icon-name="custom:custom14">
<ul class="slds-m-around_medium">
<template for:each={contacts} for:item="contact">

<div key={contact.Id}>
<lightning-checkbox-group name="Checkbox Group"
                label="Checkbox Group"
                options={options}
                value={value}>
                </lightning-checkbox-group>
                 {contact.Name}, {contact.Title}

</div>
</template>
</ul>
</lightning-card>
</template>

Answer 1

You forgot to initialize an attribute for the selected values:

@track value = [];

Because of this, when the framework tries to determine which boxes are checked, it fails because of an undefined value. Note that this won't work directly, because the value would be bound to all the groups. Instead, you need to place the value in each contact entry.

Here's the new code:

<template>
<lightning-card title="HelloForEach" icon-name="custom:custom14">
<ul class="slds-m-around_medium">
<template for:each={contacts} for:item="contact">

<div key={contact.Id}>


    <lightning-checkbox-group name="Checkbox Group"
                label="Checkbox Group"
                options={options}
                value={contact.value}>
                </lightning-checkbox-group>


                {contact.Name}, {contact.Title}

</div>
</template>
</ul>
</lightning-card>
</template>

---

import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {
    contacts = [
        {
            Id: 1,
            Name: 'Amy Taylor',
            Title: 'VP of Engineering',
            value: []
        },
        {
            Id: 2,
            Name: 'Michael Jones',
            Title: 'VP of Sales',
            value: []
        },
        {
            Id: 3,
            Name: 'Jennifer Wu',
            Title: 'CEO',
            value: []
        },
    ];
    get options() {
        return [
            { label: '', value: 'option1' },

        ];
    }
}

I've also updated your Playground for you.