How to select multiple lightning checkbox group or radio group in LWC?

Question

I have four questions on UI. User need to select yes or no for each question and save into database. From the below code I am not able to select Yes or No for each question. If I select Yes or not one questions, other questions values are deselecting. How to select multiple checkbox or radio group button in LWC?

HTML:

<lightning-checkbox-group name="Checkbox Group"
                          label='Event'
                          options={options}
                          value={value}
                          onchange={handleChange}></lightning-checkbox-group>
                          <p>Selected Values are: {selectedValues}</p>
              <lightning-checkbox-group name="Checkbox Group"
                          label='outsideEvent'
                          options={options1}
                          value={value}
                          onchange={handleChange}></lightning-checkbox-group>
                          <p>Selected Values are: {selectedValues}</p>
              <lightning-checkbox-group name="Checkbox Group"
                          label='selected?'
                          options={options2}
                          value={value}
                          onchange={handleChange}></lightning-checkbox-group>
                          <p>Selected Values are: {selectedValues}</p>

JS:

  get options() {
    return [
        { label: 'Yes', value: 'True' },
        { label: 'No', value: 'false' },
    ];
  }
  get selectedValues() {
    return this.value.join(',');
}
get options1() {
    return [
        { label: 'Yes', value: 'option3' },
        { label: 'No', value: 'option4' },
    ];
}
get options2() {
    return [
        { label: 'Yes', value: 'option5' },
        { label: 'No', value: 'option6' },
    ];
}

[![enter image description here][1]][1]

[![enter image description here][2]][2]

Answer 1

The problem here is you are overriding the value array on click of any options outside the working lightning-checkbox-group. For simplicities sake, and readability, here is an example showing how you can store each lightning-checkbox-group values in separate arrays and then concatenate the results for your print output.

<template>
    <lightning-checkbox-group name="Checkbox Group"
                label='Event'
                options={options}
                value={groupOneValues}
                onChange={handleGroupOneChange}>
    </lightning-checkbox-group>
    
    <lightning-checkbox-group name="Checkbox Group"
                label='outsideEvent'
                options={options1}
                value={groupTwoValues}
                onChange={handleGroupTwoChange}>
    </lightning-checkbox-group>
    <p>Selected Values are: {selectedValues}</p>
</template>

Note the code changes on the onChange attribute, and the value attribute.

groupOneValues = ['option1'];
groupTwoValues = [];

get options() {
    return [
        { label: 'Yes', value: 'True' },
        { label: 'No', value: 'false' },
    ];
}

get options1() {
    return [
        { label: 'Yes', value: 'option3' },
        { label: 'No', value: 'option4' },
    ];
}

get selectedValues() {
    return this.groupOneValues.join(',') + ',' + this.groupTwoValues.join(',');
}

handleGroupOneChange(e) {
    this.groupOneValues = e.detail.value;
}

handleGroupTwoChange(e) {
    this.groupTwoValues = e.detail.value;
}