2012-02-25 68 views
0

我想实现这个使用jQuery,而不是内联,但它不工作,在线工作正常。另外一个原因,我想使用jQuery是,如果用户选择多于一个复选框,该URL应该与任何已经存在+ OR“第二复选框值”这样的附加: 的“http:// mysite的/网站/开发/非接触我们/页/ LocationSearchTestPage.aspx?S = bcs_locations & K =办公室或医院” 的空间和盈方以下或罚款.. 我怎样才能做到这一点?有人可以帮我吗?的onclick复选框追加复选框值到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 2012-02-25 05:17:28

回答

1

绑定到复选框上的更改事件。单击时读取当前的复选框值,然后读取所有其他相关复选框。将您的基本网址追加到您的自定义查询字符串并发疯。 :)

这不是测试,但我希望这是一个很好的起点。

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

非常感谢,第二部分没有工作。这是它没有看到兄弟姐妹是否被检查,如果他们是,它没有抓住价值和追加到URL的URL ...你能帮我弄明白吗? – 2012-02-25 13:33:22

+0

@brian这真棒!很棒。想知道如果你可以帮助我,而不是自动重定向复选框,我想在选中复选框后重定向点击。你会如何去做这件事? – 2016-04-06 19:16:59

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复选框值的网址上点击一个按钮什么的
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/