0

So, these are the checkbox that I'm testing.

What I have - A function that are associated with uncheck/readonly, and some of my json catch response try.
What I need to do - I need to catch the json data from checkbox response ex) Apple, Banana - values from the checkbox.

There's some of my codes attempt but still its not getting the data response.
It's only returning this value -> userInputs:Array[0]

Any idea?

.html

<template>
   <lightning-checkbox-group name="CheckboxGroup"
                          label="Which one do you like?"
                          data-id="checkbox"
                          options={options}
                          value={value}
                          onchange={handleInputVal} required></lightning-checkbox-group>
   <lightning-input type="checkbox" label="None of the above" value="none" onchange={handleUncheck}></lightning-input>
</template>

.js

import { LightningElement, track, api } from 'lwc';
import { OmniscriptBaseMixin } from 'omnistudio/omniscriptBaseMixin';

export default class customCheckboxOverride extends OmniscriptBaseMixin(LightningElement) {

    userInputs = [];
    Inputs = [];

    get options() {
        return [
            { label: 'Apple', value: 'apple' },
            { label: 'Banana', value: 'banana' },
            { label: 'Cactus', value: 'cactus' },
        ];
    }

    handleInputVal(e) { // gotta figure this function out - don't even know if this right
        this.value = e.detail.value;
        this.omniApplyCallResp({userInputs:this.userInputs});
        this.omniUpdateDataJson({'UpdatedPlanDesc': {Inputs: inputs}});
    }

    handleUncheck(e) { // uncheck + readonly function
        let i;
        let checkboxes = this.template.querySelectorAll('[data-id="checkbox"]')

        for(i = 0; i < checkboxes.length; i++) {
            checkboxes[i].disabled = e.target.checked; // readonly
            checkboxes[i].checked = false; // uncheck
        }
    }
}

1 Answer 1

1

lightning-checkbox-group is a single element; you can't get access to the stuff inside of it, nor is there an entire list of elements you can query via querySelectorAll.

You also forgot to declare a value property. This property is used to set the selected items. As such, both of these are rather trivial to implement.

value = [];
handleInputVal(e) {
  this.value = e.detail.value;
  // Other stuff here
}
handleUncheck(e) {
  this.template.querySelector('[data-id="checkbox"]').disabled = e.target.checked;
  // Uncheck all values
  this.value = [];
}
4
  • Thanks @sfdcfox! I will try this and let you know. Thanks again!!
    – Ian Lee
    Mar 12, 2022 at 3:50
  • hey @sfdcfox, do you know how to capture json data from this code?
    – Ian Lee
    Mar 13, 2022 at 15:31
  • @IanLee Why do you need JSON? What exactly are you trying to do?
    – sfdcfox
    Mar 13, 2022 at 17:01
  • sorry for the late reply. User choose the option and the options has the value. and I want the return value of it.
    – Ian Lee
    Mar 14, 2022 at 2:13

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .