Html 定义打开和关闭切换按钮的值

我正在使用切换开关来替换我的选择和2选项代码

旧代码有名称为select和两个值为“0”和“1”的选项

如何在此新代码中定义on\off按钮的值

例如，我希望“OFF”的值为0，“ON”的值为1

我没有使用ajax，只是一个常规表单

这是切换开关代码：

html，
身体{
显示器：flex；
最小高度：100%；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
字体系列：无衬线；
}
.tgl{
显示：无；
}
.tgl、.tgl:after、.tgl:before、.tgl*、.tgl*：after、.tgl*：before、.tgl*：before、.tgl+.tgl btn{
框大小：边框框；
}
.tgl:：-moz-selection.tgl:after:-moz-selection.tgl:before:-moz-selection.tgl*：-moz-selection.tgl*：-after:-moz-selection.tgl*：before:-moz-selection.tgl+.tgl btn:-moz-selection{
背景：无；
}
.tgl:：selection、.tgl:after:：selection、.tgl:before:：selection、.tgl*：：selection、.tgl*：after:：selection、.tgl*：before:：selection、.tgl+.tgl btn:：selection{
背景：无；
}
.tgl+.tgl btn{
大纲：0；
显示：块；
宽度：4em；
高度：2米；
位置：相对位置；
光标：指针；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
.tgl+.tgl btn:之后，.tgl+.tgl btn:之前{
位置：相对位置；
显示：块；
内容：“；
宽度：50%；
身高：100%；
}
.tgl+.tgl btn:之后{
右图：-50%；
}
.tgl+.tgl btn:之前{
显示：无；
}
.tgl:选中+.tgl btn:之后{
右：50%；
}
.tgl平坦+.tgl btn{
填充：2px；
过渡：所有。2轻松；
背景：#fff；
边框：4px实心#F2F2；
边界半径：2米；
}
.tgl平坦+tgl btn:之后{
过渡：所有。2轻松；
背景#f2f2；
内容：“；
边界半径：1米；
}
.tgl平坦：选中+tgl btn{
边框：4px实心#7FC6A6；
}
.tgl平坦：选中+.tgl btn:之后{
右：0%；
背景#7FC6A6；
}

纯CSS切换按钮
拨动开关

那么您要问的是如何操作拨动开关？我将此javascript添加到您的代码中：

$("#cb4").change(function() {
    if ($(this).is(":checked")) {
      //ON
      console.log("on");
    } else {
      //OFF
      console.log("off");
    }
});

代码段：

$（“#cb4”）.change（函数（）{
如果（$（this）.is（“：checked”））{
//在
控制台。登录（“登录”）；
}否则{
//关
控制台。注销（“注销”）；
}
});
html，
身体{
显示器：flex；
最小高度：100%；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
字体系列：无衬线；
}
.tgl{
显示：无；
}
.tgl、.tgl:after、.tgl:before、.tgl*、.tgl*：after、.tgl*：before、.tgl*：before、.tgl+.tgl btn{
框大小：边框框；
}
.tgl:：-moz-selection.tgl:after:-moz-selection.tgl:before:-moz-selection.tgl*：-moz-selection.tgl*：-after:-moz-selection.tgl*：before:-moz-selection.tgl+.tgl btn:-moz-selection{
背景：无；
}
.tgl:：selection、.tgl:after:：selection、.tgl:before:：selection、.tgl*：：selection、.tgl*：after:：selection、.tgl*：before:：selection、.tgl+.tgl btn:：selection{
背景：无；
}
.tgl+.tgl btn{
大纲：0；
显示：块；
宽度：4em；
高度：2米；
位置：相对位置；
光标：指针；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
.tgl+.tgl btn:之后，.tgl+.tgl btn:之前{
位置：相对位置；
显示：块；
内容：“；
宽度：50%；
身高：100%；
}
.tgl+.tgl btn:之后{
右图：-50%；
}
.tgl+.tgl btn:之前{
显示：无；
}
.tgl:选中+.tgl btn:之后{
右：50%；
}
.tgl平坦+.tgl btn{
填充：2px；
过渡：所有。2轻松；
背景：#fff；
边框：4px实心#F2F2；
边界半径：2米；
}
.tgl平坦+tgl btn:之后{
过渡：所有。2轻松；
背景#f2f2；
内容：“；
边界半径：1米；
}
.tgl平坦：选中+tgl btn{
边框：4px实心#7FC6A6；
}
.tgl平坦：选中+.tgl btn:之后{
右：0%；
背景#7FC6A6；
}

纯CSS切换按钮
拨动开关
我想下面问题的答案就是你想要的

正如您在旧代码中看到的，每个选项都有自己的值，因此我只需要为这个新选项定义相同的值code@DigiNetEvents对不起，我不知道你在问什么。。你能明确说明你想要代码做什么吗？是的，对不起，我需要使用基于所选代码的表单将“ON”\“OFF”的值作为“1”或“0”发送到我的数据库option@DigiNetEvents我不确定您如何与数据库通信，我在您的旧代码中看到的只是
echo“selected”