onselect複選框將所選值添加到URL中作爲查詢字符串

頁面加載的URL爲http://mysite.aspx/result.aspx?k=（「Hospital」）。現在頁面加載後，如果有人選擇辦公室複選框，它應該是複選框「辦公室」的URL的值追加爲 http://mysite.aspx/result.aspx?k=（「醫院」或「辦公室」）onselect複選框將所選值添加到URL中作爲查詢字符串

如何在jQuery的做到這一點？

<div class="LocationSearchBox"> 
    <input name="KeywordBox" class="BasicSearchInputBox" type="text" value="Type a Keyword.."/> 
    <div class="searchBtnHolder"><a class="searchButton" href="#" type="submit"><span>Search</span></a></div> 
</div> 
<br/><br/> 
<div class="MyOptions"> 
    Hospitals<input name="LocType" type="checkbox" value="Hospital"/> &#160; 
    Offices<input name="LocType" type="checkbox" value="Office"/> &#160; 
    Emergency Centers<input name="LocType" type="checkbox" value="Emergency"/>&#160; 
    Out-Patient Centers<input name="LocType" type="checkbox" value="Out-Patient"/>&#160; 
    Facilities<input name="LocType" type="checkbox" value="Facility"/> 
</div> 


<script type="text/javascript" language="javascript"> 
$(document).ready(function() { 
    var url = 'http://mysite.com/results.aspx?k=("Hospital"); 
    $(".LocationSearchBox a.searchButton").click(function(){ 
     var chkboxVal = $("input[name='LocType']:checked").val(); 
     var keywords = encodeURIComponent($(".BasicSearchInputBox").val()); 
      url =url+"?kwd="+keywords+"&type="+chkboxVal; 
      window.location.href=url; 
     }); 
    }): 

});

來源

2012-02-24 Anjana Sharma

您的代碼應該已經是這樣的......

$(document).ready(function() { 

var url = 'http://mysite.com/results.aspx'; 

$(".MyOptions input").click(function() { 

    var urlValues = window.location.href.split("k=(")[1]; 
    urlValues = urlValues.substring(0,urlValues .length - 1); 

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

    if (urlValues.length > 0) 
     urlValues += " OR " + checkboxValues; 

    var keywords = encodeURIComponent($(".BasicSearchInputBox").val()); 
    window.location.href = "http://mysite.aspx/result.aspx?k=(" + urlValues + ")"; 

    }); 
});

來源

2012-02-24 22:25:47

onselect複選框將所選值添加到URL中作爲查詢字符串

回答

相關問題