Why all selected radio buttons are reset when another is selected?

Question

I`m writing a component that query from database Test (like school test) and create list of task that are tied to it in the base. Derivation of questions works fine but, when I select one of radio button in one group and then select in another group, my first choice resets:

I need to select one radio button in every group (like in test in school), what is the problem and what can I do?

code:

performingTestForm.html:

<template>
<lightning-combobox
        name="progress"
        label="Status"
        value={value}
        placeholder="Select Progress"
        onchange={handleChange} >
</lightning-combobox>
<div class="slds-p-top_medium "><button class="slds-button slds-button_brand slds-align_absolute-center" onclick={startTest}>Start test</button></div>
<template for:each={tasks} for:item='task'>
    <div key={task.Id}>
        <lightning-radio-group name="task.Task_question__c"
                               data-id={task.Id}
                               label={task.Task_question__c}
                                required
                               type="radio">
        </lightning-radio-group>
    </div>
</template>

performingTestForm.js:

    import { LightningElement, track } from 'lwc';
import getAllTests from '@salesforce/apex/performingTestsController.getAllTests';
import getTestsTitle from '@salesforce/apex/performingTestsController.getTestTitles';
import getTest from '@salesforce/apex/performingTestsController.getTest';
import TaskSubtype from '@salesforce/schema/Task.TaskSubtype';
export default class PerformingTestsForm extends LightningElement {
    value = '';
    option = [];
    @track tasks = [];
    @track currentQuestion;

    async connectedCallback()
    {
        let titles = await getTestsTitle();
        for (let i = 0; i < titles.length; i++) {
            let tempObj = { label: titles[i].Test_title__c, value: titles[i].Id};
            this.option.push(tempObj);
        }
        console.log(this.option);
        this.template.querySelector("lightning-combobox").options = this.option;
    }

    shuffle(a) {
        var j, x, i;
        for (i = a.length - 1; i > 0; i--) {
            j = Math.floor(Math.random() * (i + 1));
            x = a[i];
            a[i] = a[j];
            a[j] = x;
        }
        return a;
    }

    async startTest(){
        let currentTestId = this.template.querySelector("lightning-combobox").value;
        this.currentQuestion = await getTest({testId: currentTestId});
        this.tasks = this.currentQuestion.Tasks__r;
        this.shuffle(this.tasks);
        console.log(this.tasks);
        setTimeout(() => {
            let tempArray = [1];
            let tempRadio;
            for(let i = 0; i < this.tasks.length; i++)
            {
                tempArray = [];
                tempArray.push({label: this.tasks[i].Var1__c, value: this.tasks[i].Var1__c});
                tempArray.push({label: this.tasks[i].Var2__c, value: this.tasks[i].Var2__c});
                tempArray.push({label: this.tasks[i].Var3__c, value: this.tasks[i].Var3__c});
                this.template.querySelector('[data-id="' + this.tasks[i].Id + '"]').options = tempArray;
            }
        }, 500)
    }

    handleChange(event) {
        this.value = event.detail.value;
    }
}

I do not suggest apex class because it works fine.

Answer 1

Radio buttons are checked based on the uniqueness of the name attribute. Set different names for each section and you'll be fine.

For example like this

<div key={task.Id}>
        <lightning-radio-group name="{task.Id}"
                               data-id={task.Id}
                               label={task.Task_question__c}
                                required
                               type="radio">
        </lightning-radio-group>
    </div>