多个复选框值搜索javascript

我有一个关键字列表，我为每个关键字创建了一个复选框。我的模板有一个包装内容的表单，所以我不能在复选框列表中添加嵌套表单。多个复选框值搜索javascript

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

一个包装的内容没有施加任何动作或方法的形式：

<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来提交他们的价值观的多选框选择的并提交行动以下网址：“/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); 
});

如果有人可以帮助，这将会是极大的赞赏。

Cheers，JV

来源

2012-11-08 JV10

它让你感到困惑。你想追加一些东西，或者只是像你说的那样通过URL – polin

我不确定它是否需要附加到表单的动作和方法。但是它需要在提交时发送所选复选框的值。 – JV10

感谢@mleroy，我得到了它的耐心和努力，非常感谢。问题在于我页面模板中的现有表单不允许页面提交。我删除了表单，它工作。再次感谢 – JV10

这适用于你的例子。

$('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; 
});

来源

2012-11-08 05:38:44 siger

我刚刚尝试过，但没有奏效。它是否需要引用表单ID呢？ – JV10

不，但您需要使用jQuery。看到http://jsfiddle.net/qKHd8/ – siger

我可以让它在jsfiddle中工作，并在我的页面上有jQuery 1.7.2，但我无法得到它的工作。 http://jsfiddle.net/qKHd8/1/ – JV10

我还不清楚。但是这里有一个代码，你可以建立一个字符串并通过它

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

来源

2012-11-08 05:15:53 polin

谢谢，但是这个列表是动态的，除了我提供的例子之外，将会有不同的复选框值。 – JV10

我改变了我的功能代码。你可以使用它。 – polin

该警报有效，但是当我选择多个选项时，它们会显示在警报中，如'onetwothree'将在搜索时将它们分开吗？ – JV10

多个复选框值搜索javascript

回答

相关问题