javascript - 在 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

首先，您似乎没有设置任何查询字符串值(网址末尾问号后面的内容)

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

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

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

我希望事情能有所澄清