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

Question

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

Я могу получить значения после '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

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

//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.

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

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

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

И функция OnLoad проверить флажки

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

Это отлично работает для меня.