多個複選框值搜索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

回答

相關問題