(html) changing checkbox state depending on variable boolean

Other Hardware Home Automation
9

I think that this part of the script

buttons += "<h4>Output - GPIO 2</h4><label class=\"switch\"><input type=\"checkbox\" onchange=\"toggleCheckbox(this)\" id=\"2\" " + outputState(2) + "><span class=\"slider\"></span></label>";
    buttons += "<h4>Output - GPIO 4</h4><label class=\"switch\"><input type=\"checkbox\" onchange=\"toggleCheckbox(this)\" id=\"4\" " + outputState(4) + "><span class=\"slider\"></span></label>";
    buttons += "<h4>Output - GPIO 33</h4><label class=\"switch\"><input type=\"checkbox\" onchange=\"toggleCheckbox(this)\" id=\"33\" " + outputState(33) + "><span class=\"slider\"></span></label>";

in combination with this pat of the sketch

String outputState(int output){
  if(digitalRead(output)){
    return "checked";
  }
  else {
    return "";
  }
}

actually does that. checking for the state of GPIOs 2,4 & 33 (hmm this must be ESP32 code)

Personally i never use this method of including data in a webpage, because i find it rather 'unclear' what you actually do. I steer away from the whole 'rawliteral' thing.
Now i don't want to explain the method that you pulled of the internet and don't fully understand.
I don't even use ASyncWebserver, just the normal one, though differences are minimal.
If I want to host a page that has dynamic content, i create the page line by line adding to a String, and add, in this case, the word 'checked' in the appropriate location.