2012-02-25 9 views
0

私はこれをインラインの代わりにjqueryを使って実装したいが、動作しないのでインラインでうまく動作する。私がjqueryを使用するもう一つの理由は、ユーザーが複数のチェックボックスを選択した場合、URLには既に何かが追加されている必要があります+このような「2nd CheckBox Value」: "http:// mysite/sites/dev/contact-私たち/ページ/ LocationSearchTestPage.aspx?s = bcs_locations & k =オフィスまたは病院 " ORの後ろにあるスペースはうまくいきます.. どうすればいいですか?誰かが私を助けることができますか?onclick checkbox URLにチェックボックスの値を追加します

Offices<input name="LocType" type="checkbox" 
value="Office" onclick="window.location='http://mysite/sites/dev/contact-us/Pages/LocationSearchTestPage.aspx?s=bcs_locations&k=Office'; return true;"> &#160; 
    Hospitals<input name="LocType" type="checkbox" 
value="Hospital" onclick="window.location='http://mysite/sites/dev/contact-us/Pages/LocationSearchTestPage.aspx?s=bcs_locations&k=Hospital'; return true;"> &#160; 
    Facilities<input name="LocType" type="checkbox" 
value="Facility" onclick="window.location='http://mysite/sites/dev/contact-us/Pages/LocationSearchTestPage.aspx?s=bcs_locations&k=Facility'; return true;"> 
+0

あなたはすでに[多かれ少なかれ同じ質問を投稿しました](http://stackoverflow.com/questions/9437952/onselect-checkbox-add-selected-value-to-the-url-as-querystring)、誰かがそれに答えるのに苦労し、2人が答えた[あなたの他の質問](http://stackoverflow.com/questions/9439587/onclick-checkbox-event)があります。 – nnnnnn

答えて

1

チェックボックスの変更イベントにバインドします。クリックすると、現在のチェックボックスの値を読み、次に他のすべての相対チェックボックスを読み込みます。ベースURLにカスタムクエリ文字列を追加して、狂ってしまいます。 :)

これはテストされていませんが、うまくいけばよい出発点です。

var baseUrl = 'http://mysite/sites/dev/contact-us/Pages/LocationSearchTestPage.aspx?s=bcs_locations&k='; 

$(document).ready(function() { 

    // listen to change event (customize selector to your needs) 
    $('input[type=checkbox]').change(function (e) { 

     e.preventDefault(); 

     if ($(this).is(':checked')) { 

      // read in value 
      var queryString = $(this).val(); 

      // loop through siblings (customize selector to your needs) 
      var s = $(this).siblings(); 
      $.each(s, function() { 

       // see if checked 
       if ($(this).is(':checked')) { 

        // append value 
        queryString += ' OR ' + $(this).val(); 
       } 
      }); 

      // jump to url 
      window.location = baseUrl + queryString; 
     } 
    }); 

}); 
+0

ありがとう、2番目の部分は動作していません。それは、兄弟がチェックされているかどうか見ていないかどうか、値をつかんでORでURLに追加していないかどうかを確認することができますか? –

+0

@brianこれは素晴らしいです!よく働く。自動的にリダイレクトするのではなく、私を助けることができるかどうかわかりますチェックボックスをオンにした後、クリックしてリダイレクトします。あなたはこれについてどうやって行きますか? –

0

これを試すことができます。

HTML

<input name="LocType" type="checkbox" value="Office" /> 
<input name="LocType" type="checkbox" value="Hospital" /> 
<input name="LocType" type="checkbox" value="Facility" /> 

JS

あなたがOR

で区切られたURLに付加すべてにチェックLocType]チェックボックスの値を使用してURLを作成したいのクリックのボタンか何かを持っていると仮定すると、
var url = "http://mysite/sites/dev/contact-us/Pages/LocationSearchTestPage.aspx?s=bcs_locations"; 

$('button').click(function(){ 
    //This will get the array containing values of checked LocType checkboxes 
    var checkedLocTypeValues = $('input[name=LocType]:checked').map(function(){ 
     return this.value; 
    }); 

    //Use Array.join() method to join the array elements by " OR " 
    url = url + "&k=" + checkedLocTypeValues.join(" OR "); 

    //Now you can use url variable which has all the checked LocType checkboxes value 
} 

jQueryのmap()参照 - http://api.jquery.com/jQuery.map/

関連する問題