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!! Commented Mar 12, 2022 at 3:50
  • hey @sfdcfox, do you know how to capture json data from this code? Commented Mar 13, 2022 at 15:31
  • @IanLee Why do you need JSON? What exactly are you trying to do? Commented 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. Commented Mar 14, 2022 at 2:13

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.