tableの中のチェックされたcheckboxの値を配列で取得したい

Question

ajaxを使ってphpにget送信しようと思っています。

画面のtableには各行にcheckboxがあります。
get送信で配列が送信可能であれば、画面のチェックされたcheckboxのvalueを配列で取得したいと思っています。

<table>
  <thead>
    <tr><th><input type="checkbox" id="all" /></th><th>テスト列</th></tr>
  </thead>
  <tbody id="boxes">
    <tr><td><input type="checkbox" class="chk" name="chks[]" value="1" /></td><td>テスト1</td></tr>
    <tr><td><input type="checkbox" class="chk" name="chks[]" value="2" /></td><td>テスト2</td></tr>
    <tr><td><input type="checkbox" class="chk" name="chks[]" value="3"   /></td><td>テスト3</td></tr>
    <tr><td><input type="checkbox" class="chk" name="chks[]" value="4"   /></td><td>テスト4</td></tr>
    <tr><td><input type="checkbox" class="chk" name="chks[]" value="5"   /></td><td>テスト5</td></tr>
    ...
  </tbody>
</table>

var chks = $('input:checkbox[name="chks[]"]:checked').map(function(){return $(this).val();}).get();
$.get('./check.php?chks=<?php echo "'+chks+'" ?>');

いろいろサイトを見ながら作ったのですが、これだとalertで確認したんですがカンマつなぎの文字列になっているような気がします。

そもそもget送信で配列を送ることは可能なのでしょうか。
可能であれば、jqueryでチェックされたcheckboxのvalueを配列にして取得するのはどうすれば良いのでしょうか。

よろしくお願いします。

Comments

[yambejp]

なにをトリガーにおくるのでしょうか？

Answer 1

jquery getで使い方を改めて確認してください
第２引数にデータの配列を渡せばいいだけです

Comments

[chintao1224]

ありがとうございます。
jqueryではどうすれば配列として取得できるのでしょうか。

[KazuhiroHatano]

値を配列として取得するのはできてるんじゃないでしょうか
chksにはチェックされたチェックボックスのvalueの配列が入っているはずです
あとは

$.get('./check.php',{chks}');

みたいな感じにやればcheck.phpにGETメソッドで値が送られるはずです

[chintao1224]

いったん閉じようと思ったのですが、質問させてください。配列を渡すときは{chks}のような形式になるのでしょうか。chksと同時にidも文字列ですが渡すようになりました。
$.get('./check.php?id=<?php echo $id ?>&chks=<?php echo "'+{chks}+'" ?>');のような感じになるんでしょうか。

[KazuhiroHatano]

$.get()の第二引数に連想配列を渡せばそれがURLパラメータになります

{chks}は{chks:chks}と等価です、jsでは変数を連想配列に入れるときに
変数名とキー値が同じ時にこういう書き方ができます

phpの変数とjsの変数がこんがらがってる気がします

単にjsでphpに値を送信しようとしているだけの段階で
<?php echoに出番はないはずです

Answer 2

<script>
$(function(){
  $('#btn').on('click',function(){
    $.ajax({
    url:"check.php",
    data:[...new FormData($(this).prop('form'))].map(x=>x.map(y=>encodeURIComponent(y)).join("=")).join("&"),
    }).done(function(data){
      console.log(data);
    });
  });
});
</script>

<form>
<table>
  <thead>
    <tr><th><input type="checkbox" id="all" /></th><th>テスト列</th></tr>
  </thead>
  <tbody id="boxes">
    <tr><td><input type="checkbox" class="chk" name="chks[]" value="1" /></td><td>テスト1</td></tr>
    <tr><td><input type="checkbox" class="chk" name="chks[]" value="2" /></td><td>テスト2</td></tr>
    <tr><td><input type="checkbox" class="chk" name="chks[]" value="3"   /></td><td>テスト3</td></tr>
    <tr><td><input type="checkbox" class="chk" name="chks[]" value="4"   /></td><td>テスト4</td></tr>
    <tr><td><input type="checkbox" class="chk" name="chks[]" value="5"   /></td><td>テスト5</td></tr>
  </tbody>
</table>
<input type="button" value="ajax" id="btn">
</form>

Comments

[chintao1224]

教えていただいたのに仕様が少し変わりまして。申し訳ございません。いったん閉じさせていただきます。仕様が固まりましたら、また投稿します。本当に申し訳ございませんでした。