Javascript 混乱的切换按钮状态。

我正在将我的一个表单更新为启用jQuery切换。表单很大，不需要所有字段，但如果用户希望填写所有字段，则更好。使用切换的一般想法是隐藏所有不必要的字段，以便启用切换

在网上查看一些示例时，我注意到，一旦用户决定关闭窗口并稍后回来填充，这些表单就不记得它所处的状态，如果我需要“记住表单的状态”，则必须使用浏览器cookie

嗨

$（函数（）{
如果（Cookies）{
$（“p”）。切换（！（！！Cookies（“切换状态”）| | Cookies（“切换状态”）=='true'）；
}
$（'.onoffswitch复选框'）。单击（函数（）{
log（$（this）.is（“：checked”）；
$（“p”）.toggle（）；
Cookies.set（“切换状态，$（“p”）.is（'：可见）{
有效期：1，
路径：'/'
});
});
});

它正在工作，检查

我后来注意到的是，现在cookie记住了上次关闭时的切换状态，而不是切换按钮状态

如果我需要显示文本，我会切换切换按钮，向左滑动，从灰色变为绿色，然后显示文本。我关闭表单窗口，重新加载显示文本的表单（记住，我们有一个cookie，上次关闭窗口时显示的是文本），但切换按钮为灰色或关闭

---

如何纠正这个问题？

您的开关总是打开的，因为您的HTML中硬编码了checked属性（或者至少您在小提琴中这样做了）

如果在执行cookie检查时使用jQuery设置checked属性，那么它将起作用

if (Cookies) {
    $("p").toggle(!(!!Cookies("toggle-state")) || Cookies("toggle-state") === 'true');

    // ADD THIS
    if(Cookies("toggle-state") === 'true') {
        $('#myonoffswitch').prop("checked", true);
    }
}

if (Cookies) {
    $("p").toggle(!(!!Cookies("toggle-state")) || Cookies("toggle-state") === 'true');

    // ADD THIS
    if(Cookies("toggle-state") === 'true') {
        $('#myonoffswitch').prop("checked", true);
    }
}