javascript - onclick 复选框将复选框值附加到 URL

Question

我想使用 jquery 而不是内联来实现这个，但它不起作用，内联工作正常。我想使用 jquery 的另一个原因是，如果用户选择多个复选框，则 url 应该附加已有的内容 + 或“第二个复选框值”，如下所示: “http://mysite/sites/dev/contact-us/Pages/LocationSearchTestPage.aspx?s=bcs_locations&k=办公室或医院” OR 前面和后面的空格没问题。 我怎样才能实现这个目标？有人可以帮我吗？

 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;"> 

Answer 1

绑定(bind)到复选框上的更改事件。单击时读取当前复选框值，然后读取所有其他相关复选框。将您的基本 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;
        }
    });

});