LWC – Checkbox json data response help

checkboxhttpresponsejsonlightning-web-components

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

Best Answer

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 = [];
}
Related Topic