在 HTML 和 JS 中制作响应式复选框？

Question

我需要使复选框响应（在 .HTML 文件中），即在选择复选框时，页面的 url 应该被修改并且页面应该被刷新。以下是我的代码，现在复选框正在修改 url，但是一旦刷新它们的状态，我也需要在取消选中时修改 url。请帮忙。

var $checkes = $('input:checkbox[name="ch"]').change(function () {
    var vals = $checkes.filter(':checked').map(function () {
        return this.value;
    }).get();

    var newurl = document.location.href;
    for (k in vals) {
        newurl = newurl + "+" + vals[k];
    }
    document.location.href = newurl;
    var i = newurl.lastIndexOf('/');
    var checkedOnes = newurl.substr(i + 1).split('+');

    var len = checkedOnes.length;
    for (var i = 2; i < len; i++) {
        document.getElementById(checkedOnes[i]).checked = true;
    }
});

Answer 1

首先，您似乎没有设置任何查询字符串值（URL 末尾问号后的内容）

由于 HTTP 是无状态的，因此您的复选框在页面重新加载后不会保留其状态是有道理的。

如果您使用纯前端技术，解决此问题的方法是在页面加载时通过 JavaScript 设置复选框

您拥有的代码 var i 及以后的代码不应在事件处理程序中。这似乎是您用于将复选框设置为选中或不选中的代码，因此只有在更改复选框时才会触发。但是，页面会在代码执行之前重新加载

我希望这能解决一些问题