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

これは私がURLが終わるしたい方法です：

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

ここでは、のみ値はなりますchecked方checkboxソリューション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>

で行きます urlに追加します。

希望すると、これが役立ちます。