Question

目前，在移动页面时，我想保留我在上一页中检查的复选框的状态。我也试过自己，抬头看着互联网。我找到了一些解决方案，但它并不好。以下是我发现的样本，但它只适用于Firefox，而不适用于Chrome。

<!DOCTYPE HTML>
<html><head>
<meta charset="utf-8">
<title>Persist checkboxes</title>
<style>
button {
    margin-top: 8px;
}
</style>
</head>
<body>
<div>
    <label for="option1">Option 1</label> <input type="checkbox"
        id="option1">
</div>
<div>
    <label for="option2">Option 2</label> <input type="checkbox"
        id="option2">
</div>
<div>
    <label for="option3">Option 3</label> <input type="checkbox"
        id="option3">
</div>
<button>Check all</button>



<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script
    src="http://cdn.jsdelivr.net/jquery.cookie/1.4.0/jquery.cookie.min.js"></script>

<script>
    function handleButtonClick(button) {
        if ($(button).text().match("Check all")) {
            $(":checkbox").prop("checked", true)
        } else {
            $(":checkbox").prop("checked", false)
        }
        ;
        updateButtonStatus();
    }

    function updateButtonStatus() {
        var allChecked = $(":checkbox").length === $(":checkbox:checked").length;
        $("button").text(allChecked ? "Uncheck all" : "Check all");
    }

    function updateCookie() {
        var elementValues = {};
        $(":checkbox").each(function() {
            elementValues[this.id] = this.checked;
        });

        elementValues["buttonText"] = $("button").text();
        $.cookie('elementValues', elementValues, {
            expires : 7,
            path : '/'
        })
    }

    function repopulateFormELements() {
        var elementValues = $.cookie('elementValues');
        if (elementValues) {
            Object.keys(elementValues).forEach(function(element) {
                var checked = elementValues[element];
                $("#" + element).prop('checked', checked);
            });

            $("button").text(elementValues["buttonText"])
        }
    }

    $(":checkbox").on("change", function() {
        updateButtonStatus();
        updateCookie();
    });

    $("button").on("click", function() {
        handleButtonClick(this);
        updateCookie();
    });

    $.cookie.json = true;
    repopulateFormELements();
</script>

请告诉我在这种情况下要做的事情。感谢

Answer 1

它正在firefox中工作，因为firefox会记住表单输入的状态。如果您希望它在所有浏览器中都可以使用，您可以使用cookie来存储已检查/未检查的值，或者使用用于存储key =＆gt;的localStorage（html5中的新增内容）。仅限值对

您希望在所有复选框上放置onchange侦听器并将值（已选中/未选中）存储在LS中。

var all_inputs = document.getElementsByTagName("input");
for(var i = 0; i < all_inputs.length; i++)
{
     if( all_inputs[i].getAttribute("type") == "checkbox")
     {
         checkbox = all_inputs[i];
         checkbox.addEventListener("change", function()
         {
             localStorage.setItem(checkbox.getAttribute("name"), ""+checkbox.checked ); // To convert boolean to string i put "" + checkbox.checked
         }
     }
}

但是如果我们将状态保存在本地存储中，我们还必须在加载页面时更改复选框状态。

var all_inputs = document.getElementsByTagName("input");
document.onload = function()
{
    for(var i = 0; i < all_inputs.length; i++)
    {
         if( all_inputs[i].getAttribute("type") == "checkbox")
         {
             checkbox = all_inputs[i];
             if( (var value = localStorage.getItem(checkbox.getAttribute("name")) != null)
             {
                 if(value == "true")
                     checkbox.checked = true;
                 else if(value == "false")
                     checkbox.checked = false;
             }
         }
    }
}

编辑：因此，要包含在脚本代码中的整个代码将是：

document.onload = function()
{
    var all_inputs = document.getElementsByTagName("input");
    document.onload = function()
    {
        for(var i = 0; i < all_inputs.length; i++)
        {
             if( all_inputs[i].getAttribute("type") == "checkbox")
             {
                 checkbox = all_inputs[i];

                 // Change the state (checked/unchecked) if the state is saved in localStorage 
                 if( (var value = localStorage.getItem(checkbox.getAttribute("name")) != null)
                 {
                     if(value == "true")
                         checkbox.checked = true;
                     else if(value == "false")
                         checkbox.checked = false;
                 }

                 // Then put onchange listeners to notify when checkbox state changes in order to save the state in the localStorage
                 checkbox.addEventListener("change", function()
                 {
                     localStorage.setItem(checkbox.getAttribute("name"), ""+checkbox.checked ); // I used : "" + checkbox.checked to convert boolean to string
                 }
             }
        }
    }
}

保持选中复选框状态，直到用户取消选中

1 个答案: