Assign a Value to a Checkbox Field in Salesforce LWC When Updating a Record Using Salesforce LWC

Question

How can I be able to set a new checkbox field value to html or js in LWC upon update? I implemented a lightning-record-edit-form that acts as a custom edit page for a custom object.

I tried the following but the checkbox does not update upon submit:

1st Attempt: via html using checked attribute

<lightning-input-field field-name="isDeleted__c" class="slds-hide" checked></lightning-input-field>

2nd Attempt: via html using value attribute

<lightning-input-field field-name="isDeleted__c" class="slds-hide" value=true></lightning-input-field>

3rd Attempt: via js controller

js file

handleSuccess( event ) { 
   this.dispatchEvent(
      new ShowToastEvent({
         title: 'success',
         message: 'Success！',
         variant: 'success',
      }),
   );
}

handleSubmit() {    
     this.template.querySelector('lightning-record-edit-form').submit();
     this.template.querySelector('lightning-input-field.slds-hide').checked = true;       
}

html file

<lightning-record-edit-form object-api-name="CustomObject__c" record-id={recordId} onsuccess={handleSuccess}>
     <lightning-input-field field-name="isDeleted__c" class="slds-hide"></lightning-input-field>
<lightning-record-edit-form>
<lightning-button label="Update" onclick={handleSubmit} type="submit"></lightning-button> 

Answer 1

I'm not 100% what you're asking, so here are my two answers to each question I think you might be asking:

If you're asking on how to update a field with lightning-record-edit-form:

Check out this documentation for examples on using lightning-record-edit-form.

Your code will look like this:

html

<lightning-record-edit-form object-api-name="CustomObject__c" record-id={recordId} onsuccess={handleSuccess}>
     <lightning-input-field field-name="isDeleted__c"></lightning-input-field>
     <lightning-button label="Update" onclick={handleSubmit} type="submit"></lightning-button>
<lightning-record-edit-form>

Clicking the lightning-button will automatically update the record.

If you're asking on how to change the value of the checkbox after the record has been updated:

There are a few key things to keep in mind here on getting this to work:

First is what the lightning-input-field expects you to provide. If you look at the specification, you'll see that it expects an attribute value which contains the field's value. In one of your examples, you tried using the attribute checked. The lightning-input-field won't know what to do with a checked attribute, as this is not an attribute listed in the specification. So use the attribute value for editing/updating whether or not the checkbox is checked.

Second problem: what type of data is value expecting? Unfortunately, salesforce doesn't have a clear cut example of how it represents a checkbox in javascript/html. I fetched some dummy data that contained a checkbox field, and after console.log()-ing the object, I could see that the value for a checkbox expects a plain old true or false boolean.

Lastly, I suggest you avoid using this.template.querySelector() to access/modify the checkbox's value. Since thelightning-input-field is a sub-component with value as a public property, it is better practice and more consistent with the LWC framework to assign a js variable in the HTML, e.g.

<lightning-input-field field-name="isDeleted__c" value={checkedFlag}></lightning-input-field>

And in your .js controller, you'll have

checkedFlag = true; //or false.

handleSuccess(event) { //the same handleSuccess() your edit-record-form uses
    //put whatever logic you want here to change the checkbox value
    
} 

Furthermore, in your handleSuccess(), you'll have to manually update the record (probably with updateRecord()) if you want the checkbox value to be changed after the record has been successfully edited.

Note: In both of my solutions I removed the slds-hide class from all your tags, as that just makes the HTML invisible and wasn't relevant to the solutions.