Javascript 切换开关

我有三个div的div

左、右div为文本，中间div为切换开关

这是代码

 <div class="doctors-appointment">
            <div class="Row">
                <div class="Column">
                    <b>Doctor's appointment</b>
                </div>
                <div class="Column">
                    <label class="switch">
                        <input type="checkbox">
                        <span class="slider round"></span>
                    </label>
                </div>
                <div class="Column">
                    <b>For internal purposes</b>
                </div>
                </div>
            </div>

我的问题在哪里？

添加此CSS

。医生预约{
明确：两者皆有；
宽度：100%；
边缘顶部：100px；
颜色：#1d69b4；
字体大小：20px；
}
.行{
显示：表格；
宽度：100%；/*可选*/
表布局：固定；/*可选*/
边框间距：10px；/*可选*/
}
.栏目{
显示：表格单元格；
背景色：红色；/*可选*/
}
.开关{
位置：相对位置；
显示：内联块；
宽度：60px；
高度：34px；
}
/*隐藏默认HTML复选框*/
.开关输入{显示：无；}
/*滑块*/
.滑块{
位置：绝对位置；
光标：指针；
排名：0；
左：0；
右：0；
底部：0；
背景色：#ccc；
-webkit转换：.4s；
过渡：.4s；
}
.滑块：之前{
位置：绝对位置；
内容：“；
高度：26px；
宽度：26px；
左：4px；
底部：4px；
背景色：白色；
-webkit转换：.4s；
过渡：.4s；
}
输入：选中+滑块{
背景色：#2196F3；
}
输入：焦点+.滑块{
盒影：0 0 1px#2196F3；
}
输入：选中+。滑块：之前{
-webkit转换：translateX（26px）；
-ms变换：translateX（26px）；
转化：translateX（26px）；
}
/*圆形滑块*/
.圆滑{
边界半径：34px；
}
.滑块.圆形：之前{
边界半径：50%；
}

医生预约
为内部目的

您可以只使用输入和某些样式来创建，实际上不需要新的跨度

这里我使用sass上传了一个代码笔

您的输入应该是：

<input class="switch" type="checkbox" />

---

我们可以把我的css@ChandraShekharworking对我来说很好。。检查此链接

<input class="switch" type="checkbox" />

.switch{
  -webkit-appearance: none;
  height: 1rem;
  width: 3rem;
  background-color: gray;
  border-radius: 43px;
  position: relative;
  cursor: pointer;
  &::after {
    top: 1px;
    left: 2px;
    content: '';
    width: 0.8rem;
    height:0.8rem;
    background-color:lightgray;
    position: absolute;
    border-radius: 100%;
    transition: 1s;
  }
  &:checked {
    background-color: blue;
    &::after {
      transform: translateX(2rem);
    }
  }
  &:focus {
    outline-color: transparent;
  }
}