刷新页面后保持复选框的选中状态

Question

我有几个复选框。当任何一个被点击或选中，然后单击搜索按钮时，将获取它们的值，并将其作为查询字符串传递到URL中并刷新页面，返回匹配传递查询值的结果。
像这样：mysite.com/result.aspx?k="Hospital" OR "Office" OR "Emergency"
我能够在'k='后面获取这些值。我已经捕获和存储了“Hospital”OR“Office”OR“Emergency”，现在我需要根据这些值重置复选框的选中状态，因为页面重新加载并忘记了控件的上一个状态。但是我无法继续下去了。有人能帮帮我吗？

  var checkedOnes=decodeURI(location.href.match(/\&k\=(.+)/)[1]);
        if (value.length == 2) {
            $('input[name="LocType"][value="' + value[1] + '"]').prop('checked', true);
        }  

这是我如何捕获复选框的值并将其传递到URL的方式：

var checkboxValues = $("input[name=LocType]:checked").map(function() {
        return "\"" + $(this).val() + "\"";}).get().join(" OR ");

    window.location= url+checkboxValues;

---

    <div class="LocTypeChkBoxesSearch">
    <div class="LocTypeChkBoxes">
        <input name="LocType" type="checkbox" value="Hospital"/>HOSPITALS&#160;&#160;
        <input name="LocType" type="checkbox"  value="Office"/>  PHYSICIAN OFFICES&#160;&#160;
        <input name="LocType" type="checkbox"  value="Emergency"/>EMERGENCY CENTERS&#160;&#160;
        <input name="LocType" type="checkbox"  value="Out-Patient"/>OUT-PATIENT CENTERS&#160;&#160;
        <input name="LocType" type="checkbox" value="Facility"/>FACILITIES
    </div>
    <div class="searchBtnHolder"><a class="searchButton" href="#" type="submit" ><span>GO</span></a></div>
</div>

- Anjana Sharma

---

你考虑过使用localStorage吗？ - mkk

不是所有的浏览器都支持HTML5吗？！！ - Anjana Sharma

检查一下 cookie，似乎你需要将它们实际保存在某个地方，而且由于你表示服务器端不可用，似乎会话也不是一个选项。 - Mark Schultheiss

Answer 1

我曾遇到过同样的问题，我的解决方案是使用HTML5本地存储。添加一个函数来收集复选框的值。

function(){
var data = $('input[name=checkboxName]:checked').map(function(){
        return this.value;
    }).get();
    localStorage['data']=JSON.stringify(data);
}

在加载时检查复选框的函数

function(){
    if(localStorage&&localStorage["data"]){
        var localStoredData=JSON.parse(localStorage["data"]);
        var checkboxes=document.getElementsByName('checkboxName');
        for(var i=0;i<checkboxes.length;i++){
            for(var j=0;j<localStoredData.length;j++){
                if(checkboxes[i].value==localStoredData[j]){
                    checkboxes[i].checked=true;
                }
            }
        }
        localStorage.removeItem('data');
    }
}

对我来说它工作得很好。

- Braggae

Answer 2

试试这个。

//Split the url parameter value and get all the values in an array
var checkedOnes = decodeURI(location.href.match(/\&k\=(.+)/)[1]).split(" OR ");

//Find all the checkbox with name="LocType" and cache them in local variable
var $checkBoxes = $('input[name=LocType]');

//Loop through the array and find the corresponding checkbox element using filter
$.each(checkedOnes, function(i, val){
    $checkBoxes.filter('value=[' + $.trim(val.replace(/\"/g, '')) +']').prop('checked', true);
});

我正在通过OR分割k的值，这将在数组中给出所有的值。接下来，循环遍历该数组，通过匹配其值属性找到相应的复选框，并使用prop方法将其checked属性设置为true。

- ShankarSangoli

---

这整个逻辑必须放在 document.ready() 函数里吗？它不起作用。我知道我离成功很近了.. :( - Anjana Sharma

在运行“each”循环之前，您可以检查“checkedOnes”的值吗？ - ShankarSangoli

确保你在 $(document).ready(function(){..}) 中运行此代码，以便在尝试查找和设置 checked 之前元素是可用的。 - ShankarSangoli

"急诊", "门诊", "办公室"等是如何存储值的，这会有影响吗？ - Anjana Sharma

请检查我的修改后的答案。已经注意到双引号的嵌套问题。 - ShankarSangoli

Answer 3

你不需要使用JavaScript来完成这个任务。你可以在后端代码中检查$_GET参数，并使用正确的表单元素属性来提供页面。

例如，在PHP中：

<input name="LocType" type="checkbox" value="Facility" <?php if (isset($_GET['LocType'] && $_GET['LocType'] == 'Facility') { ?> checked="checked" <?php } ?> /> FACILITIES

- Jacob S