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 viaquerySelectorAll
.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.