I have a requirement where I have to make a checkbox checked/unchecked based on the boolean field on Case object. When I am trying to select the element using querySelector, its not returning the list of selected nodes. Am I missing something?
<template if:true={lineOfBusiness}>
<div class="row first-selection-menu">
<div class="first-selection-combobox">
<h1 class="combobox-label">Line of Business</h1>
<lightning-combobox
label="Line of Business"
variant="label-hidden"
name="lineofBusiness"
value={value}
placeholder="Select the line of business"
options={lineOfBusinessPicklistValues}
onchange={handleLineBusinessChange}
>
</lightning-combobox>
</div>
<template if:true={showIsEscalated}>
<div class="escalated-checkbox">
<!-- Shuchi -->
<!-- <input type="checkbox" id="escalated" name="escalated" onchange={handeEscalation} /> -->
<input type="checkbox" data-id="escalated" name="escalated" onchange={handeEscalation}/>
<label for="escalated" class="checkbox-label"
>Technical Escalation to an expert
</label>
</div>
</template>
</template>
handleSelectedMain(event) {
this.mainSelectionValue = event.target.value;
if (this.mainSelectionValue === 'Transfer Case') {
this.lineOfBusiness = true;
if (this.showIsEscalated) {
console.log(this.template.querySelector('[data-id="escalated"]'));// getting proxy object
console.log(JSON.stringify(JSON.parse(this.template.querySelector('[data-id="escalated"]')))); // getting proxy object
this.template.querySelector('[data-id="escalated"]').checked = getFieldValue(
this.caseRecord,
ESCALATION_FLAG
);
}
}
this.showMainHelp = false;
}