页面重新加载后未检查 Javascript 复选框答案

【问题标题】：Javascript Checkboxes not getting checked after page reloaded页面重新加载后未检查 Javascript 复选框
【发布时间】：2013-02-07 17:28:30
【问题描述】：

我的 HTML 格式为：

====================================

<input type="checkbox" id="Red" onclick="changeURL('WineType', 'Red')"> Red (30499)
<input type="checkbox" id="White" onclick="changeURL('WineType', 'White')"> White (22840)

====================================

首先我调用changeURL()，然后调用isChecked()函数。

但是当这两个函数都被执行时，复选框仍然未被选中。

====================================

function changeURL(fieldname, facetname) {
    var ref= window.location.href ;
    if(fieldname == "WineType") {
        var matchPrice = location.href.match(/&fq=%7B%21tag%3Ddt1%7DWineType%3A/);

        if(matchPrice == '&fq=%7B%21tag%3Ddt1%7DWineType%3A' )
        {
            var ndStart = ref.indexOf("WineType%3A%28");
            var ndEnd = ref.indexOf("%29",ndStart );        
            ref = ref.substring(0,ndStart+12) + ref.substring(ndStart+12, ndEnd) +" OR " +facetname + ref.substring(ndEnd);
        }
        else {
            ref = ref + "?&fq=%7B%21tag%3Ddt1%7DWineType%3A%28"+facetname+"%29";
        }
    }
    window.location.href = ref;
    isChecked(facetname);
};

function isChecked(element)
{
     var field = document.getElementById(element); 
     if (element) { 
          if (field.checked) { 
                document.getElementById(element).checked= false;
          } else { 
                document.getElementById(element).checked= true; 
          } 
     }   
};

【问题讨论】：

请使用Firefox Firebug调试
（与答案无关）但是为什么需要if (field.checked == true)...为什么不if (field.checked) 看看你在做什么。即使它被选中或未选中，你也会让他们检查......改变你的逻辑if (field.checked == true) { document.getElementById(element).checked= true; } else { document.getElementById(element).checked= true; }
您好，我使用 Firefox 调试了代码。复选框被选中，但是当页面刷新时它被取消选中
很明显，在刷新复选框将被取消选中..您可以传递一个查询字符串，然后如果您在查询字符串中有这样的复选框，请选中该复选框。好的。并尝试优化您的代码
@asifsid88;是的，我理解逻辑是错误的。但是 IF 和 else 都会导致代码选中复选框。但是页面上尚未选中的复选框会重新加载。

标签： javascript checkbox

【解决方案1】：

使用 localStorage 并确保无论何时检查/取消选中都更新您的 localStorage。每当加载页面时，您首先检查您的 localStorage ，如果它不为空，那么您使用它标记所有复选框的检查。如果它是空的，则意味着页面是第一次加载或没有进行检查。

实现localStorage的最简单方法：Here
这个太棒了：Doc

附：有些人可能会遇到我建议 w3schools 的问题，但对于第一次使用它的人来说，这是 localStorage 最简单的解决方案和实现

【讨论】：

建议对我来说很好，让我试试看，如果它符合我的需要，我会回复你。
@JayeshBhoyar 一切顺利:)
这不能解决我的目的。 :(

【解决方案2】：

这里尝试了解决方案，对我的工作如下：
1) 我将复选框状态与查询字符串一起发送。
2）当页面重新加载时，我从查询字符串中提取复选框状态，然后相应地设置复选框的状态 checked 或 unchecked。

【讨论】：