SOURCE

$(function(){
  let checked=false;
  $(".switch").click(()=>{
    checked=!checked;
    if(checked){
      $(".switch>.circle").addClass("checkeddiv");
       $(".switch>.circle").removeClass("uncheckeddiv");
    }
    else{
        $(".switch>.circle").removeClass("checkeddiv");
        $(".switch>.circle").addClass("uncheckeddiv");
      
   }
   
  });
  
 
  
})

<div class="switch" >

  <div class="circle"></div>
  <span >调</span>

</div>

.switch{
  height:1.0em;
  background-color:gray;
  width:4em;
  border-radius:.65em;
  font-size:58px;
  padding:.1em;
 
  vertical-align:middle;
}

span{
  display:inline-block;
  padding:0;
  width:3em;
  margin:0;
   font-size:.8em;
  vertical-align:middle;
  float:left;
  text-align:center;
}
.switch >.circle{
   height:1.0em;
  background-color:red;
  width:1.0em;
  border-radius:.5em;
  display:inline-block;
}
.checkeddiv {
 
  float:left;
}

.uncheckeddiv {
  float:right;
}