Select multiple lightning checkbox group or radio group in LWC

lightning-web-components

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]

Best Answer

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

Related Solutions

[SalesForce] lightning-radio-group not allowing multiselect

Thanks for bringing this up. It looks like this is a documentation bug and will be fixed in the near future.

In the meantime, if you need to select more than one option, lightning-checkbox-group is probably a better choice.

[SalesForce] Lightning Radio/Checkbox option level helptext

I was looking for an OOTB solution for this myself, but out of luck. Just rolled my own. Here you go.

HTML

<template>
<fieldset class="slds-form-element">
    <legend class="slds-form-element__legend slds-form-element__label">{label}</legend>
    <div class="slds-form-element__control">
        <div class="slds-radio">
            <table class="lwcir_radio_table">
                <template for:each={referencedOptions} for:item="option" for:index="opt_index">
                    <tr key={option.id}>
                        <td>
                            <div class="lwcir_radio_input">
                                <input type="radio"
                                       name={groupName}
                                       id={option.id}
                                       value={option.value}
                                       checked={option.checked}
                                       onchange={handleInputChange}
                                       required={required} />
                                <label class="slds-radio__label" for={option.id}>
                                    <span class="slds-radio_faux"></span>
                                    <span class="slds-form-element__label">{option.label}</span>
                                </label>
                            </div>
                        </td>
                        <td if:true={option.hasHelp}>
                            <lightning-helptext content={option.help}></lightning-helptext>
                        </td>
                    </tr>
                </template>
            </table>
        </div>
    </div>
</fieldset>

Javascript

import {LightningElement, api, track} from 'lwc';
export default class LwcInputRadio extends LightningElement {
    @api label;
    @api groupName;
    @api required = false;
    @track selected;
    referencedOptions;
    @api
    set options(ops) {

        let asObject = [];
        if (ops != null) {
            if(typeof ops === "string") {
                asObject = JSON.parse(ops);

            } else {
                //Must make copy of object before modifying due to LockerService.
                asObject = JSON.parse(JSON.stringify(ops));
            }
            for (let i = 0;  Array.isArray(asObject) && i < asObject.length; i++) {
                asObject[i].id = asObject[i].value + "-" + i;
                asObject[i].hasHelp = asObject[i]["help"] != null && asObject[i]["help"] !== "";
                asObject[i].checked = false;
            }
        }
        this.referencedOptions = asObject;
    }

    get options() {
        return this.referencedOptions;
    }

    handleInputChange(event) {
        this.selected = event.target.value;
        this.referencedOptions.forEach(option => option.checked = option.value === this.selected);
        this.dispatchChangeEvent();
    }

    dispatchChangeEvent() {
        const changeEvent = new CustomEvent("delta", {
            detail: {
                value : this.selected,
            }
        });
        this.dispatchEvent(changeEvent);
    }
}

I'm using it from an aura component, but it would look something like this:

<aura:attribute name="myOptions" type="List" default="[
        {'label': 'Option 1', 'value': 'VAL_1','help':'My help text for 1'},
        {'label': 'Option 2', 'value': 'VAL_2','help':'My help text for 2'},
        {'label': 'Option 3', 'value': 'VAL_3','help':'My help text for 3'},
    ]"/>

 <c:lwc_Input_Radio
    options="{!v.myOptions}"
    label="Radio Options"
    required="true"
    ondelta="{!c.handleChangeEvent}"
    groupName="myRadioGroup">
  </c:lwc_Input_Radio>

Best Answer

Related Solutions

[SalesForce] lightning-radio-group not allowing multiselect

[SalesForce] Lightning Radio/Checkbox option level helptext

Related Topic