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应为：'/ image./ 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);
});

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

干杯，JV

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>

多个复选框值搜索javascript

2 个答案: