首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >页面刷新后检查复选框

页面刷新后检查复选框
EN

Stack Overflow用户
提问于 2012-02-27 21:31:21
回答 3查看 12.9K关注 0票数 3

我有几个复选框。当单击/选中其中任何一个并单击search按钮时,将获取它们的值并以querystring的形式传递给url,并刷新返回与传递的查询值匹配的结果的页面。如:mysite.com/Result.aspx?K=“医院”或“办公室”或“紧急情况”

我可以在“k=”之后获取这些值。我将“医院”或“办公室”或“紧急情况”捕获并存储在一个变量中。现在,我需要在页面重新加载之后,根据这些值重置复选框的选中状态,并忘记控件的前一个状态。我不能再往前走了。有人能帮我吗?

代码语言:javascript
代码运行次数:0
运行
复制
  var checkedOnes=decodeURI(location.href.match(/\&k\=(.+)/)[1]);
        if (value.length == 2) {
            $('input[name="LocType"][value="' + value[1] + '"]').prop('checked', true);
        }  

这就是我如何捕获复选框值并传递给URL的方式:

代码语言:javascript
代码运行次数:0
运行
复制
var checkboxValues = $("input[name=LocType]:checked").map(function() {
        return "\"" + $(this).val() + "\"";}).get().join(" OR ");

    window.location= url+checkboxValues;

代码语言:javascript
代码运行次数:0
运行
复制
    <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>
EN

回答 3

Stack Overflow用户

发布于 2013-07-23 13:05:27

我也遇到过同样的问题,我的解决方案是HTML5本地存储。添加用于colect复选框值的函数

代码语言:javascript
代码运行次数:0
运行
复制
function(){
var data = $('input[name=checkboxName]:checked').map(function(){
        return this.value;
    }).get();
    localStorage['data']=JSON.stringify(data);
}

和onload函数选中复选框。

代码语言:javascript
代码运行次数:0
运行
复制
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');
    }
}

对我来说工作很好。

票数 1
EN

Stack Overflow用户

发布于 2012-02-27 21:35:04

尝尝这个。

代码语言:javascript
代码运行次数:0
运行
复制
//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);
});

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

票数 0
EN

Stack Overflow用户

发布于 2012-02-27 21:38:01

你不应该为此需要JavaScript。您可以在后端代码中检查$_GET参数,并为页面提供适当的表单元素属性。

例如,在PHP中:

代码语言:javascript
代码运行次数:0
运行
复制
<input name="LocType" type="checkbox" value="Facility" <?php if (isset($_GET['LocType'] && $_GET['LocType'] == 'Facility') { ?> checked="checked" <?php } ?> /> FACILITIES
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9472590

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档