onclick checkbox 将复选框值附加到 URL答案

【问题标题】：onclick checkbox append checkbox value to URLonclick checkbox 将复选框值附加到 URL
【发布时间】：2012-03-15 12:43:35
【问题描述】：

我想使用 jquery 而不是内联来实现它，但它不起作用，内联工作正常。我想使用 jquery 的另一个原因是，如果用户选择了多个复选框，则 url 应该附加任何已经存在的内容 + OR '2nd CheckBox Value'，如下所示： “http://mysite/sites/dev/contact-us/Pages/LocationSearchTestPage.aspx?s=bcs_locations&k=办公室或医院” 前面和后面的空间或者很好.. 我怎样才能做到这一点？有人可以帮帮我吗？

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

【问题讨论】：

你已经发了more or less the same question，有人不厌其烦地回答，然后有两个人回答了your other question。

标签： javascript jquery checkbox onclick query-string

【解决方案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;
        }
    });

});

【讨论】：

非常感谢，第二部分不行了。那是它看不到是否检查了兄弟姐妹，如果检查了，则它没有获取值并使用 OR 附加到 URL...您能帮我弄清楚吗？
@brian 这太棒了！效果很好。想知道您是否可以帮助我而不是自动重定向复选框，我想在选中复选框后单击重定向。你会怎么做呢？

【解决方案2】：

你可以试试这个。

HTML

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

假设您有一个按钮或单击某个东西，您想要创建一个 url，并将所有选中的 LocType 复选框值附加到由OR分隔的 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/

【讨论】：