Jquery：獲取複選框值並將它們用作URL參數

Question

我有一個帶複選框列的表格，每個複選框都包含一個唯一值。 任何和所有的複選框都可以點擊。

當單擊一個按鈕時，我想將這些值連接到一個URL字符串，然後我將在ajax調用中使用它。

<input type="checkbox" name="product[]" value="256"> 
<input type="checkbox" name="product[]" value="317"> 
<input type="checkbox" name="product[]" value="9985"> 
<input type="checkbox" name="product[]" value="3751"> 

這就是我想要的網址落得：

http://example.com/data?pid=[checkbox value 1]&pid=[checkbox value 2]&pid=[checkbox value 3] 

等。

Answer 1

你可以做這樣的事情：

$(function() { 
     var qs = ''; 
     $('[name="product[]"]').is(':checked').each(function(index, element) { 
      qs += "pid=" + element.value + "&"; 
     }); 

     console.log(qs); 
    }); 

發佈的對象會更好，但如果這是你的要求，這應該工作。如果你喜歡，你可以修剪最後的&。

這將與發佈的數據作爲數組一個更好的解決方案：

 $(function() { 
     var data = []; 
     $('[name="product[]"]').is(':checked').each(function(index, element) { 
      data.push(element.value); 
     }); 

     console.log(data); 

     $.ajax({ 
      type: "POST", 
      url: 'your url', 
      data: data, 
      success: success, 
     }); 
    }); 
    function success() { 

    } 

Answer 2

在這裏你去解決https://jsfiddle.net/15Lx3gvv/

var url = 'http://example.com/data'; 
 
$('button').click(function(){ 
 
    var first = 0; 
 
    $('input[name="product[]"]').each(function(i){ 
 
    if($(this).is(':checked')){ 
 
     url += ((first == 0) ? "?" : "&") + 'pid=' + $(this).attr('value'); 
 
     first = 1; 
 
    } \t 
 
    }); 
 
    console.log(url); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" name="product[]" value="256"> 
 
<input type="checkbox" name="product[]" value="317"> 
 
<input type="checkbox" name="product[]" value="9985"> 
 
<input type="checkbox" name="product[]" value="3751"> 
 

 
<br/> 
 

 
<button> 
 
Submit 
 
</button>

無論 checkbox是 checked只有那些價值將附加到 url。

希望這會幫助你。