Javascript 刷新时使用复选框保持单元格颜色更改

Javascript 刷新时使用复选框保持单元格颜色更改,javascript,checkbox,colors,Javascript,Checkbox,Colors,我让单元格在复选框检查时更改背景颜色,并且我研究了如何在刷新时保持复选框的选中状态,尽管回顾过去,我认为这不再有效,但我不知道如何在刷新时保持颜色更改。实际上我根本不懂Javascript,这都是其他问题的结果,但我希望它能起作用。如果我做错了什么,请纠正我,不要以为我是故意的,因为我完全不知道我在做什么 $(document).ready(function() { $(".colourswitcher").click(function() { if($(this).is(":check

我让单元格在复选框检查时更改背景颜色,并且我研究了如何在刷新时保持复选框的选中状态,尽管回顾过去,我认为这不再有效,但我不知道如何在刷新时保持颜色更改。实际上我根本不懂Javascript,这都是其他问题的结果,但我希望它能起作用。如果我做错了什么,请纠正我,不要以为我是故意的,因为我完全不知道我在做什么

$(document).ready(function() {
$(".colourswitcher").click(function() {
    if($(this).is(":checked")) {
        $(this).closest("td").css("background","#ff3333");  
    }else {
        $(this).closest("td").css("background","#202020");
    } 
});
});

$(function(){
var test = localStorage.input === 'true'? true: false;
$('input').prop('checked', test || false);
});

$('input').on('change', function() {
localStorage.input = $(this).is(':checked');
console.log($(this).is(':checked'));
});

因为您是javascript新手,所以我要问一个愚蠢的问题:您包括jQuery了吗

您提取的这段代码使用了jQuery,这是一个非常有用的库,不是javascript内置的,它已经变得非常普遍,以至于人们在询问或回答涉及它的问题时,甚至都不会说出它的名称。但只要看到$notation,您就可能在处理jQuery

您需要在html文件中包含库文件,以便它知道这些特殊符号和语法是什么:


如果你在谷歌Chrome上测试这些东西,按F12键并查看开发者控制台。当您缺少类似的内容时,您将看到红色的未定义错误。

这里是另一个答案,假设您比我的第一个答案有更好的工作知识:

加载html文档后,代码的第一位将运行,并在单击复选框时附加事件侦听器以相应地更改最近的单元格背景颜色。但这里要注意两件事。1该行为将通过类ColorSwitcher附加到所有html元素,而不仅仅是输入。2该行为假定所单击的内容已选中属性,而只有复选框才会这样做

我认为中间的一位应该在第一次加载页面时运行一次,以从localStorage获取复选框的保存状态。此位可以移动到文档就绪位

代码的第三位将事件侦听器附加到每个输入元素,而不仅仅是复选框,这样每次单击一个复选框时,选中的true/false状态都将保存在localStorage中

localStorage是在浏览器刷新之间保存信息的方便方法。您可以保存任何需要的内容,即localStorage.CandyCanes=7,该变量将存储在用户的浏览器中,稍后可以调用。请注意,只有在只有一个复选框的情况下,上述代码才能正常工作,因为您在localStorage中使用了一个插槽或一个变量来保存:localStorage.input


这就是我现在要详细阐述的内容。如果这超出了您的预期,那么是时候蹲下来学习了,或者让专业人士参与进来。

您好,感谢您不认为我知道我在做什么^^^我想我当时确实忘了包括jQuery。。。我已经添加了它,但我只是放弃了这个网站,我用了一个电子表格。不过,我仍然想知道如何做到这一点,稍后我可能会再试一次:这只是一个个人项目的实验,所以没关系。感谢您的帮助: