多个复选框值搜索javascript

Question

我有一个关键字列表，并为每个关键字创建了一个复选框。我的模板有一个包含内容的表单，所以我不能在复选框列表周围有一个嵌套表单。

如何将选中的复选框值发送到我的搜索结果页面？

包装内容的表单没有应用任何动作或方法：

<form id="BoostMasterForm" runat="server">

这是我的复选框列表的 HTML 标记示例（复选框会因关键字而异）：

<div class="checkboxes">
  <ul>
    <li>
      <input type="checkbox" name="search" class="options" value="one">
      <label>one</label>
    </li>
    <li>
      <input type="checkbox" name="search" class="options" value="two">
      <label>two</label>
    </li>
    <li>
      <input type="checkbox" name="search" class="options" value="three">
      <label>three</label>
    </li>
  </ul>
  <input type="submit" value="Submit"/>
</div>

如何使用 javascript 或 jQuery 提交多个复选框选择的值，并在提交操作时将它们提交到以下 URL：'/imagery/image-search.aspx'

提交选项 1 和 3 的搜索结果 URL 应为：'/imagery/image-search.aspx?search=one%20three'

我正在使用我在另一篇文章中找到的这个 javascript，但是我需要它来附加表单、动作和方法。我的网站是 ASP，这篇文章是针对 PHP 网站的：

Sending multiple checkbox options

$('.options').click(function() {
    var selectedItems = new Array();
    $(".checkboxes input:checkbox[name=search]:checked").each(function() {selectedItems.push($(this).val());});
    var data = selectedItems.join('|');
    $("#opts").val(data);
});

如果有人可以提供帮助，将不胜感激。

干杯，合资

Answer 1

这适用于您的示例。

$('input[type=submit]').on('click', function(evt) {
    var selectedValues = [];
    var url = '/imagery/image-search.aspx?search=';

    $('input[type=checkbox]:checked').each(function() {
        selectedValues.push($(this).val());
    });

    url += selectedValues.join(' ');

    window.location = url;
});​

Answer 2

我还是不清楚。但是这里有一段代码，你可以在其中构建一个字符串并传递它

    <script type="text/javascript">
function fnc()
{
    elements=document.getElementById("BoostMasterForm").elements;
    str="";
    for(i=0;i<elements.length;++i)
    {
        if(elements[i].type=='checkbox' && elements[i].checked)
        str=str+elements[i].value;
    }
    alert(str);
    //alert(window.location.href+'?str='+str);
//document.getElementById("aform").submit();
}
</script>

<form id="BoostMasterForm" onsubmit="fnc()">
<div class="checkboxes">
  <ul>
    <li>
      <input type="checkbox" id="search1" name="search" class="options" value="one">
      <label>one</label>
    </li>
    <li>
      <input type="checkbox" id="search2" name="search" class="options" value="two">
      <label>two</label>
    </li>
    <li>
      <input type="checkbox" id="search3" name="search" class="options" value="three">
      <label>three</label>
    </li>
  </ul>
  <input type="submit" value="Submit"/>
</div>
</form>