2012-07-12 62 views
1

有沒有辦法或有可能使用javascript/jQuery來做到這一點?使用javascript/jQuery基於url值的自動複選框

基於

鏈接網址:第一個將檢查A類和B類和第二個例子將檢查類型d

?type=A&type=C or ?type=D 

我目前的形式:

<form name="input" action="" method="post" ><br /> 
Select Type: <br /> 
<input type="checkbox" name = "type" value="A" /> A <br /> 
<input type="checkbox" name = "type" value="B" /> B <br /> 
<input type="checkbox" name = "type" value="C" /> C <br /> 
<input type="checkbox" name = "type" value="D" /> D <br /> <br /> 
<input type="submit" value="Submit" /> 

任何提示,並建議做呢?

+0

你需要服務器生成的頁面做到這一點... – Onheiron 2012-07-12 15:05:32

回答

7

做這樣的:

var i = document.location.href.lastIndexOf('?'); 
var types = document.location.href.substr(i+1).replace(/type=/g,'').split('&'); 
$('input[name="type"]').prop('checked',function(){ 
    return $.inArray(this.value,types) !== -1; 
}); 

說明

考慮網址爲 'http://sample.com?type=A&type=C'。然後:

  • i是 '?' 的牌子在該網址
  • .substr()指數將削減type=A&type=C部分來自URL。在切割之後,我們將有這個字符串:

    "type=A&type=C" 
    
  • .replace()移除了 「TYPE =」 從上述字符串部分:

    "A&C" //after replace 
    
  • .split()拆分該字符串到數組:

    ["A","C"] 
    
  • $.inArray()檢查當前checkbox的值是否在["A","C"]數組。如果是,則checks.prop('checked',true)checkbox

+0

隨着'搜索'只包含'type = A&type = C'的'window.location',方框A,B和C會像您的代碼一樣返回。 – Ohgodwhy 2012-07-12 15:07:45

+0

@Oggodwhy沒錯。我剛剛忘記了這樣的屬性) – Engineer 2012-07-12 15:15:06

+1

我測試了你的代碼,它不能按預期工作。我在本地環境中使用'http://localhost/dev/so/index.php?type = A&type = C'來嘗試它,並檢查框「B,C和D」。我能夠在jsFiddle中通過將窗口的位置作爲字符串進行模仿並根據該代碼測試代碼來重現此操作。 [這是jsFiddle。問題是什麼?](http://jsfiddle.net/S6yGw/1/) – Ohgodwhy 2012-07-12 15:21:29

0

這個question顯示了一個使用javascript檢查查詢字符串參數的解決方案。頂部還有一個可能的duplicate question鏈接,它提供了一個使用JQuery的解決方案。

一旦確定了QUERTY字符串參數,你可以使用jQuery以檢查框(如在another question詳述):

$('input[value="A"]').prop("checked", true);