jQuery チェックボックスにチェックを入れた行を別ページに一覧で表示させたい

Question

###前提・実現したいこと
ブログ記事を作成しています。

実現したいこととして、
チェックボックスにチェックを入れた記事を一覧で表示させ、CSVダウンロードをする機能を実装したいです。（CSVダウンロード機能は未実装）

###発生している問題
チェックボックスにチェックを入れ、 一覧/CSVダウンロード と言うボタンを押下後、一覧画面にどのように表示させればいいのかが分かりませんでした。

###該当のソースコード

<form method="GET" name="article" action="{{ url('/list') }}">
    <div class="box2 padding_10">
        <button class="btn_m" onclick="location.href='/detail'" name="">一覧/CSVダウンロード</button>
    </div>

    <div class="box1">
        @foreach ($articles  as $article)
            <tr>
                <td>
                    <label>
                        <input class="article" type="checkbox" name="article" value="article_{{ $article->id }}" />
                        <div class="checkbox bold"></div>
                    </label>
                </td>
                <td>
                    <div>
                        <a class="bold t_110" name="id" href="/detail?id={{ $article->id }}"></a>
                    </div>
                    <div class="">
                        {{ $article->text }}
                    </div>
                </td>
            </tr>
        @endforeach
    </div>
</form>

article.js

var checked = $('.article [name=article]:checked');
        var valList = checked.map(function (index, el) { //記事をforeachで表示させているのでmapを使用しました。
            return $(this).val();
        }).get();
        console.log(valList);

console.log(valList); ではarticleIDがチェックを入れた分表示されています。

宜しくお願い致します。

###バージョンなど
Laravel5.4
PHP7.0
jQuery 3.1.1

Comments

[kei344]

「CSVダウンロードをする機能」はすでに実装されているのでしょうか。

[yuuuui]

コメントありがとうございます。まだ実装はしていません。その前にチェックボックスにチェックが付いている記事を一覧で表示させるところからハマってしまいました。

Answer 1

別ベージにわたすのであれば全体的にformで囲んで、buttonでサブミットして
受け側のサーバーサイドで処理するものでは？

Comments

[yuuuui]

ソースが少なかったと思ったので修正をしました。
formタグで囲い、別ページのURLにチェックボックスにチェックを入れた複数のIDが表示されるようになりました。ありがとうございます。
その後、別ページ先で一覧（ソースで言うと本文とID）を表示させたいのですが、
> 受け側のサーバーサイドで処理するものでは？
ここの部分をもう少々詳しくお教えいただけないでしょうか。
お手数ですがよろしくお願いします。

[yuuuui]

yambejp さんにお教えいただいた内容がきっかけで先に進むことができました。
コメントいただいたお二人がベストアンサーだったのですがお一人を選択させていただきました。
ありがとうございました。

Answer 2

article を article[] にしてPHP側で処理するのが良いと思います。

<input class="article" type="checkbox" name="article[]" value="article_{{ $article->id }}" />

【【PHP】チェックボックスの値を受け取る - Qiita】
http://qiita.com/4cres/items/26154314959dcccbfd34

【PHP チェックボックスの複数選択 複数表示/defaultありver - Qiita】
http://qiita.com/icelandnono/items/5aeae21345f43b8fd3cf

Comments

[yuuuui]

ありがとうございます。name="article[]"で行なったところ、
別機能で選択されたチェックボックスのみを表示と言うトグルボタンでONはshow()、OFFはhide()にすると言うのを実装していまして、その機能が反映されなくなってしまいました。
参考サイトまでありがとうございました。勉強します。

[yuuuui]

トグルボタンを修正後、複数のチェックボックスの値を受け取っていることがわかりましたのでベストアンサーとさせていただきます。ありがとうございました。