оставить флажки после обновления страницы

Question

У меня есть пара флажков. если щелкнуть / проверить любой из них и нажать кнопку поиска, они получат свои значения и передадут URL-адрес в виде строки запроса и обновят страницу, возвращая результаты, соответствующие переданным значениям запроса. как это: mysite.com/result.aspx?k="Hospital "ИЛИ" Офис "ИЛИ" Чрезвычайная ситуация "

Я могу получить значения после 'k ='. У меня есть "Больница" ИЛИ "Офис" ИЛИ "Чрезвычайная ситуация", захваченная и сохраненная в переменной. Теперь мне нужно сбросить проверенное состояние флажков на основе этих значений после перезагрузки страницы и забыл предыдущее состояние элементов управления. Я не мог двигаться дальше, чем это. Кто-нибудь может мне помочь?

  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>

Answer 1

Я столкнулся с той же проблемой, и мое решение - HTML5 Local Storage. Добавить функцию для сбора значений флажков

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');
    }
}

Это нормально для меня.

Answer 2

Вам не нужен JavaScript для этого.Вы можете проверить параметры $ _GET в своем внутреннем коде и обработать страницу соответствующими атрибутами элемента формы.

В PHP, например:

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

Answer 3

Попробуйте это.

//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, что даст все значения в массиве.Затем выполните цикл по массиву и найдите соответствующий флажок, сопоставив его атрибут value, и установите для его свойства checked значение true, используя метод prop.