How can I change the switch display based on the value from the database

Question

So I have a switch for each day of the week, simple html and css. When the switch is clicked to on/off position it sends the event to jquery which then sends it to PHP to update the database. Then I am querying that database to get the value for each day (1 for ON, 0 for OFF).

How can I change the display of the switch based on a 1 or 0 value from PHP. For example: if the value from the database is 1, then the ::after css should be displayed(green). if it is a 0 then the ::before should be displayed(grey). And of course the user can simply change it by clicking on the switch.

Here is the code for the switch:

if($row['monday'] == '1'){ 
    echo'<div class="material-switch" style="margin-left:45%;">
       <input id="mondaySelect" name="mondaySelect" type="checkbox"/>
       <label for="mondaySelect" class="label-success"></label>
    </div>';                    
}

Here is the CSS for the switch, the switch when selected changes to on position and green color, when clicked again goes grey to the off position.

.material-switch > input[type="checkbox"] {
    display: none;   
}

.material-switch > label {
    cursor: pointer;
    height: 0px;
    position: relative; 
    width: 40px;  
}

.material-switch > label::before {
    background: rgb(0, 0, 0);
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    content: '';
    height: 16px;
    margin-top: -8px;
    position:absolute;
    opacity: 0.3;
    transition: all 0.4s ease-in-out;
    width: 40px;
}
.material-switch > label::after {
    background: rgb(255, 255, 255);
    border-radius: 16px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    content: '';
    height: 24px;
    left: -4px;
    margin-top: -8px;
    position: absolute;
    top: -4px;
    transition: all 0.3s ease-in-out;
    width: 24px;
}
.material-switch > input[type="checkbox"]:checked + label::before {
    background: inherit;
    opacity: 0.5;
}
.material-switch > input[type="checkbox"]:checked + label::after {
    background: inherit;
    left: 20px;
}

Here is a picture for clarity

Answer 1

This CSS depends on the checked attribute of the checkbox. If it's checked it will display the switch as on, otherwise it will display the switch as off which is a good CSS design.

We can make use of that simply in PHP, by just echo the "checked" attribute if the value from Database is 1, otherwise don't echo "checked".

For example Change this

if($row['monday'] == '1'){ 
    echo'<div class="material-switch" style="margin-left:45%;">
       <input id="mondaySelect" name="mondaySelect" type="checkbox"/>
       <label for="mondaySelect" class="label-success"></label>
    </div>';                    
}

To this

if($row['monday'] == '1')$mondayChecked = "checked";
else $mondayChecked = "";

echo'<div class="material-switch" style="margin-left:45%;">
   <input id="mondaySelect" name="mondaySelect" type="checkbox" ' 
   . $mondayChecked .' />
   <label for="mondaySelect" class="label-success"></label>
</div>';  

Answer 2

If you want to use material switch, it may be worth to implement https://material.io/develop/web/components/input-controls/switches/

You can attach the code into your template and check if it works.

<!-- Required styles for MDC Web -->
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">

if($row['monday'] == '1'){ 
    echo'<div class="mdc-switch mdc-switch--checked">
  <div class="mdc-switch__track"></div>
  <div class="mdc-switch__thumb-underlay">
    <div class="mdc-switch__thumb">
      <input type="checkbox" id="basic-switch" class="mdc-switch__native-control" role="switch" checked>
    </div>
  </div>
</div>';                    
}