保持複選框頁面刷新後檢查

我有幾個複選框。當他們中的任何一個被點擊/選中並且搜索按鈕被點擊時，將會獲取它們的值並作爲querystring傳遞給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); 
     }

這是怎麼了捕捉的複選框值，並傳遞給網址：

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>

來源

2012-02-27 Anjana Sharma

您是否考慮過使用localStorage？ – mkk 2012-02-27 21:33:02

並非所有的瀏覽器都支持html5嗎？ – 2012-02-27 21:37:34

檢查cookie，你將不得不將它們實際保存在我看來的某個地方，而且由於你指出服務器端出了問題，會話似乎不是一個選項。 – 2012-02-27 21:43:09

試試這個。

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

來源

2012-02-27 21:35:04 ShankarSangoli

這是怎麼得到所有的複選框，除非你有一個'每個'函數內的這個變量？var $ checkBoxes = $（'input [name = LocType]'）; – 2012-02-27 21:42:58

你不必把它保存在'each'循環中。我將它保存在外部並將結果緩存到變量中的原因是爲了避免在循環中一次又一次找到所有複選框。 – ShankarSangoli 2012-02-27 21:46:48

這整個邏輯必須在document.ready（）內 - 它不起作用。我知道我很接近.. :( – 2012-02-27 21:47:29

您不應該爲此需要使用JavaScript。您可以檢查後端代碼中的$ _GET參數，並使用適當的表單元素屬性提供頁面。

在PHP中，例如：

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

來源

2012-02-27 21:38:01

沒有後端訪問，所有客戶端... – 2012-02-27 21:38:48

我面臨同樣的問題，我的解決辦法是HTML5本地存儲。添加功能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'); 
    } 
}

這是工作沒什麼問題。

來源

2013-07-23 13:05:27 Braggae

回答

相關問題