2012-02-25 2 views
0

인라인 대신 jquery를 사용하여 구현하고 싶지만 작동하지 않습니다. 인라인은 잘 작동합니다. jquery를 사용하고자하는 또 다른 이유는 사용자가 두 개 이상의 체크 박스를 선택하면 URL에 이미있는 값이 더해 지거나 + '두 번째 CheckBox 값'이 다음과 같이 추가되어야합니다 : "http : // mysite/sites/dev/contact- us/Pages/LocationSearchTestPage.aspx? s = bcs_locations & k = 사무실 또는 병원 " infront와 OR 다음에 공백이 있습니다. 어떻게해야합니까? 누군가 나를 도울 수 있습니까?onclick 확인란 on 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), 누군가 대답에 어려움을 겪었고 두 사람이 대답 한 [다른 질문] (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

정말 고맙습니다. 두 번째 부분이 작동하지 않습니다. 형제 자매가 확인되었는지 여부를 확인하지 못하고 그 값을 가져 오지 않고 OR에 URL을 추가하지 않으면 ... 그 점을 이해하도록 도와 줄 수 있습니까? –

+0

@ 브라이언 이것은 최고입니다! 훌륭하게 작동합니다. 자동으로 리디렉션하지 않고 나를 도와 줄 수 있는지 궁금합니다 확인란을 선택한 후 클릭하면 리디렉션하고 싶습니다. 이 일에 대해 어떻게 생각하세요? –

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/

관련 문제